jquery.validate是jquery的一个插件，用来辅助开发者在客户端方便快捷的实现表单验证，最终达到提高用户体验的目的。

官网：

http://plugins.jquery.com/validate/

示例代码

index.cshtml


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
< form  id = "formLogin"  method = "post" >
   < div >
     < label  for = "username" >Username:</ label >
     < input  type = "text"  id = "username"  name = "username"  />
   </ div >
   < div >
     < label  for = "password" >password:</ label >
     < input  type = "text"  id = "password"  name = "password"  />
   </ div >
   < div >
     < label  for = "password1" >password1:</ label >
     < input  type = "text"  id = "password1"  name = "password1"  />
   </ div >
   < div >
     < label  for = "sex" >sex:</ label >
     < select  id = "sex"  name = "sex" >
       < option  id = "sexopt"  value = ""  selected = "selected" >请选择</ option >
       < option  id = "sexnan"  value = "1" >男</ option >
       < option  id = "sexnv"  value = "2" >女</ option >
     </ select >
   </ div >
   < div >
     < label  for = "favorite" >level:</ label >
     < input  type = "checkbox"  id = "sport"  name = "favorite"  value = "sport"  />sport
     < input  type = "checkbox"  id = "write"  name = "favorite"  value = "write"  />write
   </ div >
   < div >
     < label  for = "level" >level:</ label >
     < input  type = "radio"  id = "one"  name = "level"  value = "one"  />1
     < input  type = "radio"  id = "two"  name = "level"  value = "two"  />2
   </ div >
   < div >
     < input   id = "submit"  type = "button"  value = "submit"  />
   </ div >
</ form >
@section scripts{
< script  type = "text/javascript"  src = "/content/home/index.js" ></ script >
}

jquery.validate在定位html标签的时候，默认使用name属性来获取标签，所以需要开发者给需要进行验证的标签都加上name属性，并且赋值。

index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
$().ready( function  () {
   $( "#formLogin" ).validate({
     rules: {
       username: {
         required:  true
       },
       password: {
         required:  true
       },
       sex: {
         required:  true
       },
       level: {
         required:  true
       },
       favorite: {
         required:  true
       }
     },
     messages: {
       username: {
         required:  "please input username"
       },
       password: {
         required:  "please input password"
       },
       sex: {
         required:  "please select sex"
       },
       level: {
         required:  "level requred"
       },
       favorite: {
         required:  "favorite required"
       }
     },
     errorPlacement:  function  (error, element) {  //指定错误信息位置
       if  (element.is( ':radio' ) || element.is( ':checkbox' )) {  //如果是radio或checkbox
        var  eid = element.attr( 'name' );  //获取元素的name属性
        error.appendTo(element.parent());  //将错误信息添加当前元素的父结点后面
      }  else  {
        error.insertAfter(element);
      }
    }
  });
});
$( "#submit" ).click( function  () {
   $( "#submit" ).submit();
});

有时候我们需要使用正则表达式对一些输入进行验证，比如说邮箱，电话号码，或者是用户名必须字母开头并且长度要在5-30位，等等之类的。

jquery.validate默认没有提供正则表达式的验证，但是它提供了一个扩展，我们可以自己添加关于正则表达式的验证规则。

1
2
3
4
5
6
7
8
9
10
$( function  () {
     // 判断用户输入的value是否满足传入的正则params的规范
     jQuery.validator.addMethod( "pattern" ,  function  (value, element, params) {
                                                                                                                             
         if  (!params.test(value)) {
             return  false ;
         }
         return  true ;
     });
});

这样我们就可以像下面这样使用我们自定义的正则表达式验证了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$().ready( function  () {
     $( "#formLogin" ).validate({
         rules: {
                                                                                                                     
             tel: {
                 required: true ,
                 pattern: /^[0-9]+$/
             }
         },
         messages: {
                                                                                                                     
             tel: {
                 required: 'tel required' ,
                 pattern:  "regex error"
             }
         }
                                                                                                                 
     });
});

怎么样，是不是很酷啊！


$("#formSupplier").validate还有一些其他的参数，跟多的参数可以查看

http://blog.csdn.net/a497785609/article/details/5758613

在这里先介绍两个比较常用的。

errorElement

错误提示的html标签

submitHandler

验证成功之后的操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$( "#formSupplier" ).validate({
         errorElement:  "span" ,
           
         submitHandler:  function  (form) {
             if  (btnType == 1) {
                   
                 submitUpdateSupplier();
             }  else  {
                 offShelf();
             }
         },
         rules: {
             txtSuUserName: {
                 required:  true ,
                 pattern: regexUsername
             }
         }，
         messages: {
             txtSuUserName: {
                 required:  "请填写编号！" ,
                 pattern:  "请注意，编号只能使用3-15位的字母组合！"
             }
         }
});




本文转自 virusswb 51CTO博客，原文链接：http://blog.51cto.com/virusswb/1369501，如需转载请自行联系原作者