最近在学习asp.netMVC，发现其中的验证方式书写方便快捷，应用简单，易学好懂。

验证方式基于jQuery的validate 验证方式，也可以说是对jQuery validate的验证方式的扩展，使其更简单易用。

应用

一、引入 <script src="Scripts/jquery-1.7.1.min.js"></script>

　　 <script src="Scripts/jquery.validate.js"></script>

　　<script src="Scripts/jquery.validate.unobtrusive.js"></script>

二、1）在需要验证的input标签上添加属性data-val="true"，即表示改标签参加验证。

　　2）继续在标签上添加属性data-val-required="用户名不能为空！"，表示此标签的内容不能为空的验证。

三、显示验证信息，有两种方式显示。一种是集中显示验证信息，另一种是在具体位置显示相对应的验证信息。

　　1）在需要显示验证信息的位置写入以下代码

1   
     
      2             
      
       3                 
       
4             
      
5         
     

　　2）相对应的验证信息显示

1    

以上三部即可完成最基本简单的验证。

如需添加标签的其他验证只需重复第二部即可。

验证规则

一、简单规则

　　刚才我们知道了data-val-required是必输字段，简单的验证规则如下

　　1.data-val-required 必输字段 

　　2.data-val-email 必须输入正确格式的电子邮件

　　3.data-val-url 必须输入正确格式的网址

　　4.data-val-date 必须输入正确格式的日期

　　5.data-val-digits: 必须输入正整数

　　6.data-val-number:必须输入整数

二、复杂一点的规则

　　我们知道了简单基本的验证规则，但这些不能满足我们的需求。

　　1.比如注册确认密码的验证

　　 （data-val-equalto="密码和确认密码不匹配。" data-val-equalto-other="pwd"）

　　这时只设置一个属性不能满足我们的需求。因为我们要找到另一个文本框的值。data-val-equalto-other对应另一个文本框的name的值

1  
     
       2        
       3                *密码 4          5  　　   
      
        6              
        7              
        8         
      
 9   
     
10  
     
      11          
      12                  *确认密码13            14      
      
       15                  
       16                   
       17       
      
18
     

　　2.data-val-length 字符的长度 ，data-val-length-max表示最大字符数 data-val-length-min 表示最小字符数

1 
     
      2                 
      3                     *密码4                 5                 
      
       6                     
       7                     
       8                 
      
9             
     

　　3.data-val-accept 正确的后缀名，data-val-accept-exts 符合后缀名的集合

　　data-val="true" data-val-required="不能为空！" data-val-accept="后缀名为.jpg、.gif或.png" data-val-accept-exts="jpg|gif|png"

　　4.data-val-range 数字的大小范围，data-val-range-min 最小数 data-val-range-max 最大数

三、再复杂一点的规则（正则）

　　以上的验证规则需要两个或者两个以上的属性才能完成验证，但是这些仍然不能满足我们的需求。比如手机格式的验证，这些我们可能需要正则来辅助我们验证

　　data-val-regex表示正则的验证方式，data-val-regex-pattern正则的表达式

1   
     
      2          
      3          
      4     
     

 

四、再再复杂一点的规则（ajax）

　　有点时候我们需要ajax来验证规则，比如我们常见的检查用户名是否可用

　　data-val-remote可以帮助我们实现功能，data-val-remote-url表示ajax验证的路径，直接返回true or false 即可完成验证。

1  
     
      2            
      3            
      4   
     

五、终极验证规则（自定义验证规则）

　　虽然以上验证规则足够可以我们使用，但是可能需要我们自定义的验证规则。

　　熟悉jQuery validate的验证方式知道可以添加自定义的验证规则，因为此验证规则是对jQuery validate的扩展，所以需要在jQuery validate的基础上进行自定义验证。

　　1)添加jQuery validate自定义验证方法

　　判断值是否等于“123”

1  $.validator.addMethod('notequal', function (value, element, params)2   　　{3             return value != "123";4  　　});

　　2)添加扩展方法的自定义方法

1  $.validator.unobtrusive.adapters.add("notequal", function (options)2         {3             options.rules["notequal"] = {4                5             };6             options.messages["notequal"] = options.message;7         });

　　3)data-val-notequal="姓名不能等于 123"

　　

1   2    

　　这样即可完成简单的自定义验证规则。

　　有的时候我们需要指定参数来实现自定义验证规则

　　

1  $.validator.addMethod('notequal', function (value, element, params) 2         { 3             return value != params["va"]; 4         }); 5  6         $.validator.unobtrusive.adapters.add("notequal", ["va"], function (options) 7         { 8             options.rules["notequal"] = { 9                 va: options.params.va10             };11             options.messages["notequal"] = options.message;12         });

1    2    

这样就可以完成比较复杂的自定义验证规则。

用jquery验证是否通过可以

$("#form-invoince").valid()

本人第一次写博客，希望多多支持！！