jQuery.Validate验证库

柔光的暖阳◎ 2022-07-31 16:12 141阅读 0赞

## [jquery.validata1.11怎么支持metadata][jquery.validata1.11_metadata] ##

#  #

# \#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\# #

## jQuery.Validate验证库 ##

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

## 默认校验规则 ##

**\[plain\]**  [view plain][] [copy][view plain]

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][view plain]

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][view plain]

1.  <script language="JavaScript" type="text/JavaScript" src="messages\_cn.js"></script>

**\[javascript\]**  [view plain][] [copy][view plain]

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][view plain]

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

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

**\[html\]**  [view plain][] [copy][view plain]

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

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

**\[html\]**  [view plain][] [copy][view plain]

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

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

**\[html\]**  [view plain][] [copy][view plain]

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

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

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

**\[html\]**  [view plain][] [copy][view plain]

注意：

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

正确写法：

**\[html\]**  [view plain][] [copy][view plain]

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

错误写法：

**\[html\]**  [view plain][] [copy][view plain]

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

再有一种方式

**\[html\]**  [view plain][] [copy][view plain]

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

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

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

**\[html\]**  [view plain][] [copy][view plain]

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

正确写法：

**\[html\]**  [view plain][] [copy][view plain]

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

错误写法：

**\[html\]**  [view plain][] [copy][view plain]

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

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

**\[html\]**  [view plain][] [copy][view plain]

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][view plain]

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

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

**\[html\]**  [view plain][] [copy][view plain]

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][view plain]

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][view plain]

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 定义出错信息的样式

如下图所示：

![1358778198_5965.png][]

[jquery.validata1.11_metadata]: http://blog.csdn.net/adparking/article/details/46649029
[Link 1]: http://download.csdn.net/detail/zm2714/5016353
[view plain]: http://blog.csdn.net/zm2714/article/details/8525825#
[1358778198_5965.png]: https://img-my.csdn.net/uploads/201301/21/1358778198_5965.png