JqueryValidate使用-优快云博客

1. Jqueryvalidate用来做表单提交时的验证

默认校验规则如下：

 1 1    required:true    必须输入的字段。
 2 2    remote:"check.php"    使用 ajax 方法调用 check.php 验证输入值。
 3 3    email:true    必须输入正确格式的电子邮件。
 4 4    url:true    必须输入正确格式的网址。
 5 5    date:true    必须输入正确格式的日期。日期校验 ie6 出错，慎用。
 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。

View Code

若校验失败，默认是英文提示，也可以修改默认提示，js代码如下：

 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 });

View Code

推荐做法，将此文件放入 messages_cn.js 中，在页面中引入：

2. 使用方式

（1）直接写在控件中

 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 
 5 $().ready(function() {
 6  $("#signupForm").validate();
 7 });
 8 
 9 
10 <form id="signupForm" method="get" action="">
11     <p>
12         <label for="firstname">Firstname</label>
13         <input id="firstname" name="firstname" class="required" />
14     </p>
15  <p>
16   <label for="email">E-Mail</label>
17   <input id="email" name="email" class="required email" />
18  </p>
19  <p>
20   <label for="password">Password</label>
21   <input id="password" name="password" type="password" class="{required:true,minlength:5}" />
22  </p>
23  <p>
24   <label for="confirm_password">确认密码</label>
25   <input id="confirm_password" name="confirm_password" type="password" class="{required:true,minlength:5,equalTo:'#password'}" />
26  </p>
27     <p>
28         <input class="submit" type="submit" value="Submit"/>
29     </p>
30 </form>
31 使用 class="{}" 的方式，必须引入包：jquery.metadata.js。
32 
33 可以使用如下的方法，修改提示内容：
34 
35 class="{required:true,minlength:5,messages:{required:'请输入内容'}}"
36 在使用 equalTo 关键字时，后面的内容必须加上引号，代码如下所示：
37 class="{required:true,minlength:5,equalTo:'#password'}"

View Code

（2）写在js代码中

 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 });

View Code

3. 表单提交

 1 $().ready(function() {
 2  $("#signupForm").validate({
 3         submitHandler:function(form){
 4             alert("submitted");   
 5             form.submit();
 6         }    
 7     });
 8 });
 9 
10 异步方式：
11 
12 $(".selector").validate({     
13  submitHandler: function(form) 
14    {      
15       $(form).ajaxSubmit();     
16    }  
17  })

View Code

4. 调试模式（只验证，不提交）

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

View Code

5. 更改错误信息位置

 1 errorPlacement: function(error, element) {  
 2     error.appendTo(element.parent());  
 3 }
 4 
 5 比如：
 6 
 7 errorPlacement: function(error, element) {
 8     if ( element.is(":radio") )
 9         error.appendTo( element.parent().next().next() );
10     else if ( element.is(":checkbox") )
11         error.appendTo ( element.next() );
12     else
13         error.appendTo( element.parent().next() );
14 }

View Code

6. 更改错误信息提示样式

 1 input.error { border: 1px solid red; }
 2 label.error {
 3   background:url("./demo/images/unchecked.gif") no-repeat 0px 0px;
 4 
 5   padding-left: 16px;
 6 
 7   padding-bottom: 2px;
 8 
 9   font-weight: bold;
10 
11   color: #EA5200;
12 }
13 label.checked {
14   background:url("./demo/images/checked.gif") no-repeat 0px 0px;
15 }

View Code

7. 验证后重置表单

 1 // 重置表单
 2 $().ready(function() {
 3  var validator = $("#signupForm").validate({
 4         submitHandler:function(form){
 5             alert("submitted");   
 6             form.submit();
 7         }    
 8     });
 9     $("#reset").click(function() {
10         validator.resetForm();
11     });
12 
13 });

View Code

8. 异步验证（远程地址只能输出 "true" 或 "false"，不能有其他输出。）

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

View Code

9. 自定义验证规则

 1 // 邮政编码验证   
 2 jQuery.validator.addMethod("isZipCode", function(value, element) {   
 3     var tel = /^[0-9]{6}$/;
 4     return this.optional(element) || (tel.test(value));
 5 }, "请正确填写您的邮政编码");
 6 
 7 jQuery.validator.addMethod("isRegister", function (value, element) {
 8     var result = "false";
 9     $.ajax({
10         type: "get",
11         url: "/api/Account/IsRegister",
12         async: false,  //此处同步执行
13         data: { account: value },
14         success: function (data) {
15             result = data;
16         }
17     });
18     return result == false;
19 }, "该账号已被注册");