四、使用方式
1.将校验规则写到控件中

Js代码 
  1. <script src="../js/jquery.js" type="text/javascript"></script>
  2. <script src="../js/jquery.validate.js" type="text/javascript"></script>
  3. <script src="./js/jquery.metadata.js" type="text/javascript"></script>
  4. $().ready(function() {
  5. $("#signupForm").validate();
  6. });
  7. <form id="signupForm" method="get" action="">
  8. <p>
  9. <label for="firstname">Firstname</label>
  10. <input id="firstname" name="firstname" class="required" />
  11. </p>
  12. <p>
  13. <label for="email">E-Mail</label>
  14. <input id="email" name="email" class="required email" />
  15. </p>
  16. <p>
  17. <label for="password">Password</label>
  18. <input id="password" name="password" type="password" class="{required:true,minlength:5}" />
  19. </p>
  20. <p>
  21. <label for="confirm_password">确认密码</label>
  22. <input id="confirm_password" name="confirm_password" type="password" class="{required:true,minlength:5,equalTo:'#password'}" />
  23. </p>
  24. <p>
  25. <input class="submit" type="submit" value="Submit"/>
  26. </p>
  27. </form>

使用class="{}"的方式，必须引入包：jquery.metadata.js

可以使用如下的方法，修改提示内容：

Js代码  
  1. class="{required:true,minlength:5,messages:{required:'请输入内容'}}"

在使用equalTo关键字时，后面的内容必须加上引号，如下代码：

Js代码   
  1. class="{required:true,minlength:5,equalTo:'#password'}"

另外一个方式，使用关键字：meta（为了元数据使用其他插件你要包装 你的验证规则 在他们自己的项目中可以用这个特殊的选项）

Tell the validation plugin to look inside a validate-property in metadata for validation rules.
例如：

Js代码  
  1. meta: "validate"
  2. <input id="password" name="password" type="password" class="{validate:{required:true,minlength:5}}" />

再有一种方式：

Js代码  
  1. $.metadata.setType("attr", "validate");

这样可以使用validate="{required:true}"的方式，或者class="required"，但class="{required:true,minlength:5}"将不起作用

2.将校验规则写到代码中

Html代码  
  1. $().ready(function() {
  2. $("#signupForm").validate({
  3. rules: {
  4. firstname: "required",
  5. email: {
  6. required: true,
  7. email: true
  8. },
  9. password: {
  10. required: true,
  11. minlength: 5
  12. },
  13. confirm_password: {
  14. required: true,
  15. minlength: 5,
  16. equalTo: "#password"
  17. }
  18. },
  19. messages: {
  20. firstname: "请输入姓名",
  21. email: {
  22. required: "请输入Email地址",
  23. email: "请输入正确的email地址"
  24. },
  25. password: {
  26. required: "请输入密码",
  27. minlength: jQuery.format("密码不能小于{0}个字符")
  28. },
  29. confirm_password: {
  30. required: "请输入确认密码",
  31. minlength: "确认密码不能小于5个字符",
  32. equalTo: "两次输入密码不一致不一致"
  33. }
  34. }
  35. });
  36. });
  37. //messages处，如果某个控件没有message，将调用默认的信息
  38. <form id="signupForm" method="get" action="">
  39. <p>
  40. <label for="firstname">Firstname</label>
  41. <input id="firstname" name="firstname" />
  42. </p>
  43. <p>
  44. <label for="email">E-Mail</label>
  45. <input id="email" name="email" />
  46. </p>
  47. <p>
  48. <label for="password">Password</label>
  49. <input id="password" name="password" type="password" />
  50. </p>
  51. <p>
  52. <label for="confirm_password">确认密码</label>
  53. <input id="confirm_password" name="confirm_password" type="password" />
  54. </p>
  55. <p>
  56. <input class="submit" type="submit" value="Submit"/>
  57. </p>
  58. </form>

required:true 必须有值
required:"#aa:checked"表达式的值为真，则需要验证
required:function(){}返回为真，表时需要验证
后边两种常用于，表单中需要同时填或不填的元素
 
五、常用方法及注意问题
1.用其他方式替代默认的SUBMIT

Js代码  
  1. $().ready(function() {
  2. $("#signupForm").validate({
  3. submitHandler:function(form){
  4. alert("submitted");
  5. form.submit();
  6. }
  7. });
  8. });

可以设置validate的默认值，写法如下：

Js代码  
  1. $.validator.setDefaults({
  2. submitHandler: function(form) { alert("submitted!");form.submit(); }
  3. });

如果想提交表单, 需要使用form.submit()而不要使用$(form).submit()

2.debug，如果这个参数为true，那么表单不会提交，只进行检查，调试时十分方便

Js代码  
  1. $().ready(function() {
  2. $("#signupForm").validate({
  3. debug:true
  4. });
  5. });

如果一个页面中有多个表单，用

Js代码  
  1. $.validator.setDefaults({
  2. debug: true
  3. })

3.ignore：忽略某些元素不验证

Js代码  
  1. ignore: ".ignore"

4.errorPlacement：Callback  Default: 把错误信息放在验证的元素后面  
指明错误放置的位置，默认情况是：error.appendTo(element.parent());即把错误信息放在验证的元素后面 
errorPlacement: function(error, element) {   
    error.appendTo(element.parent());   
}
//示例：

Html代码  
  1. <tr>
  2. <td class="label"><label id="lfirstname" for="firstname">First Name</label></td>
  3. <td class="field"><input id="firstname" name="firstname" type="text" value="" maxlength="100" /></td>
  4. <td class="status"></td>
  5. </tr>
  6. <tr>
  7. <td style="padding-right: 5px;">
  8. <input id="dateformat_eu" name="dateformat" type="radio" value="0" />
  9. <label id="ldateformat_eu" for="dateformat_eu">14/02/07</label>
  10. </td>
  11. <td style="padding-left: 5px;">
  12. <input id="dateformat_am" name="dateformat" type="radio" value="1"  />
  13. <label id="ldateformat_am" for="dateformat_am">02/14/07</label>
  14. </td>
  15. <td></td>
  16. </tr>
  17. <tr>
  18. <td class="label">&nbsp;</td>
  19. <td class="field" colspan="2">
  20. <div id="termswrap">
  21. <input id="terms" type="checkbox" name="terms" />
  22. <label id="lterms" for="terms">I have read and accept the Terms of Use.</label>
  23. </div>
  24. </td>
  25. </tr>
Js代码  
  1. errorPlacement: function(error, element) {
  2. if ( element.is(":radio") )
  3. error.appendTo( element.parent().next().next() );
  4. else if ( element.is(":checkbox") )
  5. error.appendTo ( element.next() );
  6. else
  7. error.appendTo( element.parent().next() );
  8. }
代码的作用是：一般情况下把错误信息显示在<td class="status"></td>中，如果是radio显示在<td></td>中，如果是checkbox显示在内容的后面

errorClass：String  Default: "error"  
指定错误提示的css类名，可以自定义错误提示的样式
errorElement：String  Default: "label"  
用什么标签标记错误，默认的是label你可以改成em
errorContainer：Selector  
显示或者隐藏验证信息，可以自动实现有错误信息出现时把容器属性变为显示，无错误时隐藏，用处不大
errorContainer: "#messageBox1, #messageBox2"
errorLabelContainer：Selector 
把错误信息统一放在一个容器里面。
wrapper：String
用什么标签再把上边的errorELement包起来
一般这三个属性同时使用，实现在一个容器内显示所有错误提示的功能，并且没有信息时自动隐藏

Js代码  
  1. errorContainer: "div.error",
  2. errorLabelContainer: $("#signupForm div.error"),
  3. wrapper: "li"

设置错误提示的样式，可以增加图标显示

Js代码  
  1. input.error { border: 1px solid red; }
  2. label.error {
  3. background:url("./demo/p_w_picpaths/unchecked.gif") no-repeat 0px 0px;
  4. padding-left: 16px;
  5. padding-bottom: 2px;
  6. font-weight: bold;
  7. color: #EA5200;
  8. }
  9. label.checked {
  10. background:url("./demo/p_w_picpaths/checked.gif") no-repeat 0px 0px;
  11. }
  12. success：String,Callback

要验证的元素通过验证后的动作，如果跟一个字符串，会当做一个css类，也可跟一个函数

Js代码 
  1. success: function(label) {
  2. // set &nbsp; as text for IE
  3. label.html("&nbsp;").addClass("checked");
  4. //label.addClass("valid").text("Ok!")
  5. }

添加"valid" 到验证元素, 在CSS中定义的样式<style>label.valid {}</style>
success: "valid"

nsubmit： Boolean  Default: true  
提交时验证. 设置唯false就用其他方法去验证
onfocusout：Boolean  Default: true  
失去焦点是验证(不包括checkboxes/radio buttons) 
onkeyup：Boolean  Default: true  
在keyup时验证.
Default: true  
在checkboxes 和 radio 点击时验证
focusInvalid：Boolean  Default: true  
提交表单后，未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点
focusCleanup：Boolean  Default: false  
如果是true那么当未通过验证的元素获得焦点时，移除错误提示。避免和 focusInvalid 一起用
 
// 重置表单

Java代码  
  1. $().ready(function() {
  2. var validator = $("#signupForm").validate({
  3. submitHandler:function(form){
  4. alert("submitted");
  5. form.submit();
  6. }
  7. });
  8. $("#reset").click(function() {
  9. validator.resetForm();
  10. });
  11. });

remote：URL

使用ajax方式进行验证，默认会提交当前验证的值到远程地址，如果需要提交其他的值，可以使用data选项

Js代码  
  1. remote: "check-email.php"
  2. remote: {
  3. url: "check-email.php",     //后台处理程序
  4. type: "post",               //数据发送方式
  5. dataType: "json",           //接受数据格式
  6. data: {                     //要传递的数据
  7. username: function() {
  8. return $("#username").val();
  9. }
  10. }
  11. }

远程地址只能输出 "true" 或 "false"，不能有其它输出
 
 
addMethod：name, method, message
自定义验证方法

Js代码 
  1. // 中文字两个字节
  2. jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
  3. var length = value.length;
  4. for(var i = 0; i < value.length; i++){
  5. if(value.charCodeAt(i) > 127){
  6. length++;
  7. }
  8. }
  9. return this.optional(element) || ( length >= param[0] && length <= param[1] );
  10. }, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));
  11. // 邮政编码验证
  12. jQuery.validator.addMethod("isZipCode", function(value, element) {
  13. var tel = /^[0-9]{6}$/;
  14. return this.optional(element) || (tel.test(value));
  15. }, "请正确填写您的邮政编码");

radio和checkbox、select的验证
radio的required表示必须选中一个

Html代码  
  1. <input  type="radio" id="gender_male" value="m" name="gender" class="{required:true}" />
  2. <input  type="radio" id="gender_female" value="f" name="gender"/>
  3. checkbox的required表示必须选中
  4. <input type="checkbox" class="checkbox" id="agree" name="agree" class="{required:true}" />
  5. checkbox的minlength表示必须选中的最小个数,maxlength表示最大的选中个数,rangelength:[2,3]表示选中个数区间
  6. <input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" class="{required:true, minlength:2}" />
  7. <input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam[]" />
  8. <input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam[]" />
  9. select的required表示选中的value不能为空
  10. <select id="jungle" name="jungle" title="Please select something!" class="{required:true}">
  11. <option value=""></option>
  12. <option value="1">Buga</option>
  13. <option value="2">Baga</option>
  14. <option value="3">Oi</option>
  15. </select>
  16. select的minlength表示选中的最小个数（可多选的select）,maxlength表示最大的选中个数,rangelength:[2,3]表示选中个数区间
  17. <select id="fruit" name="fruit" title="Please select at least two fruits" class="{required:true, minlength:2}" multiple="multiple">
  18. <option value="b">Banana</option>
  19. <option value="a">Apple</option>
  20. <option value="p">Peach</option>
  21. <option value="t">Turtle</option>
  22. </select>

//

jQuery.Validate是监控form，在任何提交表单的操作前jQuery.Validate都会检测表单里的输入项是否满足规则，满足才允许提交。所以需

要在jQuery(document).ready（）时为form进行验证注册

具体代码如下:

<body>
<form id="form1"runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1"runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#form1").validate();
});
</script>
</body>

jQuery.Validate为我们提供了3种验证编写方式，各有优缺点：

1、在input对象中书写class样式指定验证规则或属性验证规则：

如<input type=”text” class=”required”/>

最简单、最便捷，提示消息使用jQuery.Validate的内置的消息（自定义扩展验证规则也属于此项），但是由于是以样式名的方式进行验证，导致了日后修改必须找到相应的input对象，同时无法使用高级验证规则，具体说明请向下看

2、同第1条，这种验证规则方式也是在input对象中书写class样式，只不过书写的方式改为了JSON格式，但是这种方式提供了自定义验证消息的支持：

如<input type=”text” class="{required:true,minlength:5,,messages:{required:'请输入内容'}”/>

简单、方便，但个人认为有点臃肿，还是和第1条一样和相对应的input对象纠缠在一起，并且还增加消息自定义，使得input对象变的更大了，干扰了页面代码的阅读，但可以使用高级验证规则（实际就是将第3种JS以JSON的格式放到具体的class中

3、这种方式使用纯JS的方式：

如：

$().ready(function() { 
    $("#aspnetform").validate({ 
         rules: { 
         name: "required", 
         email: { 
                 required: true, 
                 email: true 
         }

})

})

很好的解决了HTML和验证规则的分离，就是书写较为麻烦，需要单独写JS脚本，但好处是可以统一验证规范，将每个页面的验证规则都写在头部的脚本中，方便日后维护。

注意：以上3种验证方式的消息如果未指定都会默认调用内置的消息

1、在使用上一篇中第2种方式，以JSON的格式编写验证规则，影响了正常的class使用，如何处理？

2、在ASP.NET下，所有的按钮都会提交form表单，所以都会引发验证，如何处理？

3、我希望验证的提示信息可以在统一的地方显示，如何处理？

4、我在开发的过程中，我不确定所编写的规则是否正确，如何进行调试？

5、我使用的是微软AJAX控件，想监控dropdownlist是否选择，为何不起作用?

6、radiobox，checkbox，listbox如何进行高级应用？如何指定选择数量？

1点：在使用上一篇中第2种方式，以JSON的格式编写验证规则，影响了正常的class使用，如何处理？（具体见Middle-4.aspx）

首先看下使用第2种方式是如何编写验证规则的：

<asp:TextBox ID="txtPwd" TextMode="Password" runat="server" CssClass="{required:true,minlength:6,messages:{required:'你不输入密码怎么行呢?',minlength:'密码太短啦至少6位'}}"></asp:TextBox>

可以看到这样写验证规则虽然简单，但是如果我要为这个控件应用其他样式怎么办？所以现在就是处理这个问题的时候了，在页面的头部加上一句代码：

jQuery.metadata.setType("attr", "validate");

由于这种验证规则方式需要依赖jQuery.metadata才可以正常运作，所以我们需要在jQuery.metadata上做文章，分析下jQuery.metadata的代码，可以看到，默认情况下它是检测控件的class属性：

defaults : { 
            type: 'class', 
            name: 'metadata', 
            cre: /({.*})/, 
            single: 'metadata' 
        }

那我们可不可以更改这个属性呢？肯定是可以的，就是在页面上加上那句代码，更改其检测的属性。

接着我们还需要修改下页面中的代码，将原来所有的"CssClass”改为我们更改的检测属性"validate”、

这样就很好的更改了验证规则所存放的属性了。

第2点：在ASP.NET下，所有的按钮都会提交form表单，所以都会引发验证，如何处理？（具体见Middle-4.aspx中btnNoValidate按钮）

在实际的开发当中，一个页面上总会有N个按钮，由于ASP.NET的机制特性，所有的控件都会回发页面，也就提交了表单，但是此时整个表单都被jQuery.Validate所监控，所以只要页面中有某个地方不符合验证规则，任何回发页面的操作都会被拦截住，但是实际上我们需要引发验证的按钮只有1或者2个，而其他按钮不需要，这时我们就要想办法了。

其实很简单，就是为不需要引发验证的控件加个样式"cancel"即可，代码如下：

<asp:Button ID="btnNoValidate" runat="server" Text="点我不会引发验证哦" CssClass="cancel" />

怎么样很简单吧？

第3点：我希望验证的提示信息可以在统一的地方显示，如何处理？（具体见Middle-5.aspx）

在开发的过程当中，会有一些特殊的需求，就比如页面上使用了tab页面，而提交按钮就一个，这时就需要将验证提示信息统一放在一个位置，好方便查看，如图：

要实现这个效果只需在JS编写验证规则时添加：

errorPlacement: function(error, element) { 
                       error.html(error.html()+"<br/>"); 
                       error.appendTo("#errorContainer"); 
               }

error是一个label对象里面包含了错误消息，element则是验证未通过的对象元素，通过errorPlacement可以方便的将验证提示信息统一放入一个位置。

第4点：我在开发的过程中，我不确定所编写的规则是否正确，如何进行调试？（具体见Middle-5.aspx）

这个就比较简单了，jQuery.Validate默认已经为我们考虑过了，只需在JS编写规则时添加一个属性：

debug:true

这样就表示现在在调试，这时不会提交表单。

第5点：我使用的是微软AJAX控件，想监控dropdownlist是否选择，为何不起作用?（具体见Middle-5.aspx中的性别）

在使用微软AJAX控件中的dropdownlist级联时，比如省市区联动，如果省没有选择，则市和区都是灰的，是disabled状态，是被禁用的，类似代码如下：

<asp:DropDownList ID="DropDownList1" runat="server" CssClass="required" disabled="true"> 
    <asp:ListItem></asp:ListItem> 
    <asp:ListItem Value="1">男</asp:ListItem> 
    <asp:ListItem Value="0">女</asp:ListItem> 
</asp:DropDownList>

我这边是强制把这个DropDownList禁用了，这时如果为这个控件加上“required”将不会有任何反应，因为在jQuery.Validate代码中默认是不验证的，具体代码见jQuery.Validate.js414行：

not(":submit, :reset, :p_w_picpath, [disabled]")

所以为了方便我们使用，我们修改下代码，将[disabled]"去除，改为：

not(":submit, :reset, :p_w_picpath")

这样再刷新下页面，验证就起作用了。

第6点：radiobox，checkbox，listbox如何进行高级应用？如何指定选择数量？（具体请见radio-checkbox-select-demo.html）

这点我直接引用了官方关于radiobox，checkbox，listbox应用的例子，因为官方的例子已经写的非常好了。

1、扩展验证规则，jQuery.Validate只提供了一些基本的验证功能，并不能满足我们日常开发的需求，所以我们要为jQuery.Validate扩展验证规则。

2、分组验证，在开发的时候有时会遇到的一个问题就是，不同按钮引发不同的验证。

首先来介绍下第一点：扩展验证规则，在jQuery.Validate默认的验证规则无法满足我们的日常开发需求的时候，我们需要根据自己的业务需求指定一些相应的规则。（具体见MasterPage.master）

为了扩展验证规则，我们首先要看下jQuery.Validate为我们提供的扩展方法：

addMethod: function(name, method, message) { 
    $.validator.methods[name] = method; 
    $.validator.messages[name] = message; 
    if (method.length < 3) { 
        $.validator.addCla***ules(name, $.validator.normalizeRule(name)); 
    } 
},

这段代码就是用来扩展验证规则的，意思很简单，就是向jQuery.Validate添加验证方法。

接收3个参数：name-验证规则名

method-验证规则实现函数（function）

message-验证不通过显示的错误消息

当我们调用了这个方法后，我们所写的规则自动就会加入到jQuery.Validate规则中。

好了，我们看下具体如何实现：

手机号码验证：

jQuery.validator.addMethod("telphoneValid", function(value, element) { 
    var tel = /^(130|131|132|133|134|135|136|137|138|139|150|153|157|158|159|180|187|188|189)\d{8}$/; 
    return tel.test(value) || this.optional(element); 
}, "请输入正确的手机号码");

这边的method需要注意的是，这个method实现函数接收2个元素：

value：检测的对象的值

element：检测的对象

这边我定义了一个名为“telphoneValid”的验证规则，在验证规则里我首先定义了个手机验证的正则表达式，然后将值放入正则表达式进行验证，返回验证结果，返回的错误消息是“请输入正确的手机号码”。

这样就完成了一个简单的手机号码验证规则扩展。

转载于:https://blog.51cto.com/jeiofw/932246

jQuery.Validate验证库 2相关推荐

  1. jQuery.Validate验证库

    一.用前必备 官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/  API: http://jquery.bassi ...

  2. jQuery Validate验证框架详解

    2019独角兽企业重金招聘Python工程师标准>>> 一.导入js库 <script type="text/javascript" src="& ...

  3. atitit.jQuery Validate验证框架详解与ati Validate 设计新特性

    atitit.jQuery Validate验证框架详解与ati Validate 设计新特性 1. AtiValidate的目标1 2. 默的认校验规则1 2.1. 使用方式 1.metadata用 ...

  4. 弹出框页面中使用jquery.validate验证控件

    弹出框页面中使用jquery.validate验证控件有几个问题需要解决: 1,弹出框的提交事件完成后如何关闭弹出框页面? 2,提交不成功如何返回当前页? 3,如果知道验证事件成功? 之前笔者都是JS ...

  5. jQuery.Validate 验证,以及 remote验证, 多参数传递

    jQuery.Validate 验证: http://www.runoob.com/jquery/jquery-plugin-validate.html 教程网址,很简单, 今天主要在这里记录一下re ...

  6. jQuery.Validate 验证

    jQuery校验 一导入js库 <script src="../js/jquery.js" type="text/javascript"></ ...

  7. Jquery validate验证表单只验证第一个input元素

    jQuery Validate 使用方式在这篇文章 jQuery Validate 使用jquery.validate插件对表单进行验证时,当name属性相同,或者没有设置name属性时,则valid ...

  8. jQuery Validate验证方法及教程

    //实名认证 验证 $(function(){//中文姓名验证jQuery.validator.addMethod("zh_verify", function(value, ele ...

  9. Jquery validate验证表单时多个name相同的元素只验证第一个的问题

    下面搜集了五种方法,主要还是前两个提供了解决方案,第三种需要修改jQuery源码: 修复jquery.validate插件中name属性相同(如name='a[]')时验证的bug 使用jquery. ...

最新文章

  1. VTK：数据集表面用法实战
  2. appium + python 搭建
  3. 双y轴如何合并图例_如何对图表批量组合、对齐、画中画、合并图例、自动化加标签。。。...
  4. Win7部署基础知识(2)：制作WinPE
  5. excel公式不自动计算_WPS表格仅显示公式不计算结果怎么办
  6. calendar.getinstance()获取的是什么时间_时间管理技能培训.ppt
  7. Flex中让Panel等容器可拖动
  8. word根据数字符号自动回车
  9. match函数的用法
  10. iPhone4S 未能激活蜂窝移动数据网
  11. 借助传感器用计算机测量速度,实验用打点计时器测速度修改.ppt
  12. python机械臂仿真_机械臂 python
  13. Handling App Links
  14. Qt深入浅出（六）设计师界面
  15. 移位 display属性 内补白 外补白 Layout布局
  16. 【读书笔记】第1章“自律100天”的华丽开启
  17. 企业如何选择合适的精益生产方案？
  18. 让笔记本延年－电池的保养技巧
  19. ubuntu18 安装jdk后报错Error occu‘r‘re‘d during initialization of VM
  20. 微分方程中的自洽系统（Autonomous system）

热门文章

  1. 理解C#中的里氏转换
  2. IO is frozen on database xxx, No user action is required
  3. 大数据上的“大产品”
  4. 兼容性测试之VMware
  5. Java classLoader【转】
  6. 8招教您做好B2B行业网站页面设计
  7. 360技术嘉年华第七季——测试之美 报名啦
  8. golang sync.map
  9. 算法题存档20200627（树）
  10. erlang的gb_trees源码解析