jQuery.Validate验证库 --zm2714

jQuery.Validate验证库

1、下载jquery.validate，这里我提供jquery-validation-1.9.0，点击下载

默认校验规则

[plain] view plain copy

1. (1)required:true               必输字段  
2. (2)remote:"check.php"          使用ajax方法调用check.php验证输入值  
3. (3)email:true                  必须输入正确格式的电子邮件  
4. (4)url:true                    必须输入正确格式的网址  
5. (5)date:true                   必须输入正确格式的日期  
6. (6)dateISO:true                必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性  
7. (7)number:true                 必须输入合法的数字(负数，小数)  
8. (8)digits:true                 必须输入整数  
9. (9)creditcard:                 必须输入合法的信用卡号  
10. (10)equalTo:"#field"           输入值必须和#field相同  
11. (11)accept:                    输入拥有合法后缀名的字符串（上传文件的后缀）  
12. (12)maxlength:5                输入长度最多是5的字符串(汉字算一个字符)  
13. (13)minlength:10               输入长度最小是10的字符串(汉字算一个字符)  
14. (14)rangelength:[5,10]         输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)  
15. (15)range:[5,10]               输入值必须介于 5 和 10 之间  
16. (16)max:5                      输入值不能大于5  
17. (17)min:10                     输入值不能小于10  

默认的提示

[plain] view plain copy

1. messages: {    
2.     required: "This field is required.",    
3.     remote: "Please fix this field.",    
4.     email: "Please enter a valid email address.",    
5.     url: "Please enter a valid URL.",    
6.     date: "Please enter a valid date.",    
7.     dateISO: "Please enter a valid date (ISO).",    
8.     dateDE: "Bitte geben Sie ein g眉ltiges Datum ein.",    
9.     number: "Please enter a valid number.",    
10.     numberDE: "Bitte geben Sie eine Nummer ein.",    
11.     digits: "Please enter only digits",    
12.     creditcard: "Please enter a valid credit card number.",    
13.     equalTo: "Please enter the same value again.",    
14.     accept: "Please enter a value with a valid extension.",    
15.     maxlength: $.validator.format("Please enter no more than {0} characters."),    
16.     minlength: $.validator.format("Please enter at least {0} characters."),    
17.     rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),    
18.     range: $.validator.format("Please enter a value between {0} and {1}."),    
19.     max: $.validator.format("Please enter a value less than or equal to {0}."),    
20.     min: $.validator.format("Please enter a value greater than or equal to {0}.")    
21. },  

如需要修改，将以下js代码保存为：messages_cn.js，并在页面中引用：

[javascript] view plain copy

1. <script language="JavaScript" type="text/JavaScript" src="messages_cn.js"></script>  

[javascript] view plain copy

1. jQuery.extend(jQuery.validator.messages, {  
2.   required: "必选字段",  
3.   remote: "请修正该字段",  
4.   email: "请输入正确格式的电子邮件",  
5.   url: "请输入合法的网址",  
6.   date: "请输入合法的日期",  
7.   dateISO: "请输入合法的日期 (ISO).",  
8.   number: "请输入合法的数字",  
9.   digits: "只能输入整数",  
10.   creditcard: "请输入合法的信用卡号",  
11.   equalTo: "请再次输入相同的值",  
12.   accept: "请输入拥有合法后缀名的字符串",  
13.   maxlength: jQuery.validator.format("请输入一个长度最多是 {0} 的字符串"),  
14.   minlength: jQuery.validator.format("请输入一个长度最少是 {0} 的字符串"),  
15.   rangelength: jQuery.validator.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),  
16.   range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),  
17.   max: jQuery.validator.format("请输入一个最大为 {0} 的值"),  
18.   min: jQuery.validator.format("请输入一个最小为 {0} 的值")  
19. });  

使用方式

1、将校验规则写到控件中

[html] view plain copy

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

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

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

[html] view plain copy

1. <input id="firstname" name="firstname" class="{required:true,minlength:5,messages:{required:'请输入内容'}}" />  

上面代码表示：如果firstname域不填写任何内容，则提示：请输入内容。那么，如果填写的内容长度小于5的话，提示用户，该如何写呢？请看下面代码：

[html] view plain copy

1. <input id="firstname" name="firstname" class="{required:true,minlength:5,messages:{required:'请输入内容',minlength:'字符串长度不能小于5'}}" />  

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

[html] view plain copy

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

另外一个方式，使用关键字：meta

例如，将上面示例中的代码改为关键字meta形式，代码如下：

[html] view plain copy

1. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
2. <script language="JavaScript" type="text/JavaScript" src="jquery-1.6.1.js"></script>  
3. <script language="JavaScript" type="text/JavaScript" src="jquery.validate.min.js"></script>  
4. <script language="JavaScript" type="text/JavaScript" src="jquery.metadata.js"></script>  
5.   
6. <script>  
7. $().ready(function() {  
8.   $("#signupForm").validate({meta: "validate"});  
9. });  
10. </script>  
11.   
12. <form id="signupForm" method="get" action="">  
13.     <p>  
14.         <label for="firstname">Firstname</label>  
15.     <input id="firstname" name="firstname" class="{validate:{required:true,minlength:5,messages:{required:'请输入内容',minlength:'字符串长度不能小于5'}}}" />  
16.  <p>  
17.   <label for="email">E-Mail</label>  
18.   <input id="email" name="email" class="{validate:{required:true, email:true}}" />  
19.  </p>  
20.  <p>  
21.   <label for="password">Password</label>  
22.   <input id="password" name="password" type="password" class="{validate:{required:true,minlength:5}}" />  
23.  </p>  
24.  <p>  
25.   <label for="confirm_password">确认密码</label>  
26.   <input id="confirm_password" name="confirm_password" type="password" class="{validate:{required:true,minlength:5,equalTo:'#password'}}" />  
27.  </p>  
28.     <p>  
29.         <input class="submit" type="submit" value="Submit"/>  
30.     </p>  
31. </form>  

注意：

规则部分应用完整形式，如下所示：

正确写法：

[html] view plain copy

1. <input id="email" name="email" class="{validate:{required:true, email:true}}" />  

错误写法：

[html] view plain copy

1. <input id="email" name="email" class="{validate:{required email}}" />  

再有一种方式

[html] view plain copy

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

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

例如，将上面示例代码改为：

[html] view plain copy

1. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
2. <script language="JavaScript" type="text/JavaScript" src="jquery-1.6.1.js"></script>  
3. <script language="JavaScript" type="text/JavaScript" src="jquery.validate.min.js"></script>  
4. <script language="JavaScript" type="text/JavaScript" src="jquery.metadata.js"></script>  
5.   
6. <script>  
7. $().ready(function() {  
8.   $.metadata.setType("attr", "validate");  
9.   $("#signupForm").validate();  
10. });  
11. </script>  
12.   
13. <form id="signupForm" method="get" action="">  
14.     <p>  
15.         <label for="firstname">Firstname</label>  
16.     <input id="firstname" name="firstname" validate="{required:true}" />  
17.  <p>  
18.   <label for="email">E-Mail</label>  
19.   <input id="email" name="email" validate="{required:true, email:true}" />  
20.  </p>  
21.  <p>  
22.   <label for="password">Password</label>  
23.   <input id="password" name="password" type="password" validate="{required:true,minlength:5}" />  
24.  </p>  
25.  <p>  
26.   <label for="confirm_password">确认密码</label>  
27.   <input id="confirm_password" name="confirm_password" type="password" validate="{required:true,minlength:5,equalTo:'#password'}" />  
28.  </p>  
29.     <p>  
30.         <input class="submit" type="submit" value="Submit"/>  
31.     </p>  
32. </form>  

注意：规则部分应用完整形式，即

正确写法：

[html] view plain copy

1. <input id="email" name="email" validate="{required:true, email:true}" />  

错误写法：

[html] view plain copy

1. <input id="email" name="email" validate="{required email}" />  

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

[html] view plain copy

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

required:true 必须有值

required:"#aa:checked"id名称为aa的dom被选中时，则需要验证

required:function(){} 返回为真，表示需要验证（仅针对required有效，其它无效。）

后边两种常用于，表单中需要同时填或不填的元素

下面针对上面三项内容，通过实例来说明一下，更易于理解。（第一个说明：required:true 必须有值 这项就不在举例了，通过上面的示例，已经非常清楚。）

required:"#aa:checked" 的示例如下：

[html] view plain copy

1. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
2. <script language="JavaScript" type="text/JavaScript" src="jquery-1.6.1.js"></script>  
3. <script language="JavaScript" type="text/JavaScript" src="jquery.validate.min.js"></script>  
4. <script language="JavaScript" type="text/JavaScript" src="jquery.metadata.js"></script>  
5. <script>  
6. $().ready(function() {  
7.   $("#signupForm").validate({  
8.     rules:  
9.     {  
10.       firstname: "required",  
11.       email:  
12.       {  
13.         required: "#open:checked",  
14.         email: true  
15.       }  
16.     },  
17.     messages:  
18.     {  
19.       firstname: "请输入姓名",  
20.       email:  
21.       {  
22.         required: "请输入Email地址",  
23.         email: "请输入正确的email地址"  
24.       }  
25.     }  
26.   });  
27. });  
28. //messages处，如果某个控件没有message，将调用默认的信息  
29. </script>  
30. <form id="signupForm" method="get" action="">  
31.     <p>  
32.         开关：  
33.         <input id="open" name="open" type="radio" />  
34.         <label for="open">打开</label>  
35.         <input id="close" name="close" type="radio" />  
36.         <label for="close">关闭</label>  
37.     </p>  
38.     <p>  
39.       <label for="email">E-Mail</label>  
40.       <input id="email" name="email" />  
41.     </p>  
42.     <p>  
43.         <input class="submit" type="submit" value="Submit"/>  
44.     </p>  
45. </form>  

当选中“打开”时，则对email进行验证。

required:function(){}的示例如下：

[html] view plain copy

1. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
2. <script language="JavaScript" type="text/JavaScript" src="jquery-1.6.1.js"></script>  
3. <script language="JavaScript" type="text/JavaScript" src="jquery.validate.min.js"></script>  
4. <script language="JavaScript" type="text/JavaScript" src="jquery.metadata.js"></script>  
5. <script>  
6. $().ready(function() {  
7.   $("#signupForm").validate({  
8.     rules:  
9.     {  
10.       firstname: "required",  
11.       email:  
12.       {  
13.         required: function()  
14.         {  
15.           return true;  
16.         },  
17.         email: function()  
18.         {  
19.           return false;  
20.         }  
21.       }  
22.     },  
23.     messages:  
24.     {  
25.       firstname: "请输入姓名",  
26.       email:  
27.       {  
28.         required: "请输入Email地址",  
29.         email: "请输入正确的email地址"  
30.       }  
31.     }  
32.   });  
33. });  
34. //messages处，如果某个控件没有message，将调用默认的信息  
35. </script>  
36. <form id="signupForm" method="get" action="">  
37.     <p>  
38.         开关：  
39.         <input id="open" name="open" type="radio" />  
40.         <label for="open">打开</label>  
41.         <input id="close" name="close" type="radio" />  
42.         <label for="close">关闭</label>  
43.     </p>  
44.     <p>  
45.       <label for="email">E-Mail</label>  
46.       <input id="email" name="email" />  
47.     </p>  
48.     <p>  
49.         <input class="submit" type="submit" value="Submit"/>  
50.     </p>  
51. </form>  

经过测试得知，即使 email:function(){return false}); 是返回false，但是 required:function(){return true;}，是返回true，那么，除了验证是否为空外，还验证email格式。也就是说 email:function(){reuturn false;}设置无效。进一步测试，去掉 required:function(){return true;}，只保留：email:function(){reuturn false;}，仍然验证email格式。代码如下：

[html] view plain copy

1. $("#signupForm").validate({  
2.   rules:  
3.   {  
4.     firstname: "required",  
5.     email:  
6.     {  
7.       email: function()  
8.       {  
9.         return false;  
10.       }  
11.     }  
12.   },  
13.   messages:  
14.   ......  

注意：将校验规则单独写在文件中，如上面例子中的rules规则中的firstname，email等，问题是，在input中有id，又有name属性，那JQuery Validation获取哪个呢？通过测试，是获取name属性的。所以，rules中的key，是input的name属性值，而不是id属性值。

定义样式代码

[css] view plain copy

1. /* jQuery.Validate css */  
2. input.error{border: 1px dotted red;}  
3. label.error{  
4.   background-image:url('del.gif');  
5.   background-repeat:no-repeat;  
6.   padding-left:18px;  
7.   color: red;  
8. }  

input.error 定义input控件样式

label.error 定义出错信息的样式

如下图所示：