jquery validate (jquery 验证的三种方式)

jquery  验证非常简单,下面总结常用的三种方式:

第一种方式:也是比较标准的方式:

 首先引入jquery  插件和 jquery 验证插件:

第一步:引入插件





第二步: 定义表单的错误输出:  

第三步:添加错误处理方法;

jquery验证,需要有  1:定义验证方法,  2:添加验证规则

下面贴出常用的验证小例子,一看就明白了。

先看效果图:


[javascript]  view plain copy
  1. "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. "http://www.w3.org/1999/xhtml">  
  3.   
  4. "Content-Type" content="text/html; charset=gb2312" />  
  5.   
  6. "text/javascript" src="js/jquery-1.6.1.min.js">  
  7. "text/javascript" src="js/jquery.validate.js">  
  8. "text/javascript" src="js/jquery.metadata.js">  
  9. "text/javascript" src="js/messages_zh.js">  
  10. "text/css">  
  11.     #frm label.error {  
  12.         color: Red;  
  13.     }  
  14.   
  15.   
  16. "text/javascript">  
  17.   
  18. $(document).ready(function(){  
  19.    $("#clickme").click(function(){  
  20.          alert("Hello World");  
  21.   });  
  22.     
  23.     
  24.     
  25.    $( "#frm" ).validate({  
  26.            rules: {  
  27.                    username: {  
  28.                            required: true,  
  29.                            minlength: 4,  
  30.                            maxlength: 20,  
  31.                            byteMaxLength:20,  
  32.                            valiEnglish:true  
  33.                    },  
  34.                    postcode: {  
  35.                      postcodeVal:true  
  36.                     },  
  37.                    number: {  
  38.                     byteMaxLength:5,  
  39.                     numFormat:5  
  40.                     },  
  41.                     identifier: {  
  42.                     sfzhValidate:true     
  43.                     }  
  44.                       
  45.                       
  46.                      
  47.            },  
  48.            messages: {  
  49.                    username: {  
  50.                            required: "请输入用户名4--20个英文字符",  
  51.                            minlength: $.format("Keep typing, at least {0} characters required!"),  
  52.                            maxlength: $.format("Whoa! Maximum {0} characters allowed!")  
  53.                    },  
  54.                    number: {  
  55.                        numFormat: $.format("请输入{0}数字")  
  56.                     }  
  57.            }  
  58.    });  
  59.     
  60.     
  61.     
  62.   jQuery.validator.addMethod("byteMaxLength"function(value,  
  63.                     element, param) {  
  64.                 var length = value.length;  
  65.                 for ( var i = 0; i < value.length; i++) {  
  66.                     if (value.charCodeAt(i) > 127) {  
  67.                         length++;  
  68.                     }  
  69.                 }  
  70.                 return this.optional(element) || (length <= param);  
  71.             }, $.validator.format("不能超过{0}个字节(一个中文字算2个字节)"));  
  72.     
  73.   jQuery.validator.addMethod("numFormat",function(value,element,param){  
  74.              return this.optional(element) ||  /^\d*$/.test(value);  
  75.             }  
  76.             //,$.validator.format("请输入数字{0}位以内")  
  77.             );  
  78.               
  79.               
  80.                
  81.             //number(9,3)  
  82.             jQuery.validator.addMethod("numFormat63",function(value,element){  
  83.              return this.optional(element) || /^[0-9]{1,6}(\.\d{1,3})$/.test(value);  
  84.             },$.validator.format("请输入合法数字,精度格式123456.0")  
  85.             );  
  86.               
  87.               
  88.             jQuery.validator.addMethod("postcodeVal",function(value,element){  
  89.              return this.optional(element) || /^[0-9]\d{5}(?!\d)$/.test(value);  
  90.             },$.validator.format("请输入合法的邮编")  
  91.             );  
  92.               
  93.             jQuery.validator.addMethod("numberAndLettersVal",function(value,element){  
  94.              return this.optional(element) || /^[a-zA-Z0-9]+$/.test(value);  
  95.             },$.validator.format("请输入字母或数字")  
  96.             );  
  97.               
  98.               
  99.               
  100.             jQuery.validator.addMethod("sfzhValidate",function(value,element){  
  101.              return this.optional(element) || /^(\d{14}|\d{17})(\d|[xX])$/.test(value);  
  102.             },$.validator.format("请输入合法身份证号")  
  103.             );  
  104.               
  105.               
  106.               
  107.             jQuery.validator.addMethod("valiEnglish",function(value,element){  
  108.              return this.optional(element) || /^[a-zA-Z ]*$/.test(value);  
  109.             },$.validator.format("请输入字母或者空格")  
  110.             );  
  111.           
  112.   
  113. });  
  114.   
  115.   
  116.   
  117.   
  118. "frm" name="frm" method="post" action="">
  119.     "text" name="username" id="username" />  
  120.   
  121.   

      

  122.       
  123.     
  124.     "text" name="postcode" id="postcode" />  
  125.       
  126.       
  127.   

      
  128.   

  129.     "text" name="number" id="number" />  
  130.     
  131.     
  132.     "text" name="identifier" id="identifier" />  
  133.       
  134.        
  135.   
  136.   "button" name="clickme"  id="clickme" value="click me" />  
  137.     
  138.   

      
  139.   
  140.   
  141.   


这是一个完整的验证示例,关于引入的代码已经上传,可以点击下载

下面讲解其中的重点方法:

[javascript]  view plain copy
  1. jQuery.validator.addMethod("byteMaxLength"function(value,  
  2.             element, param) {  
  3.         var length = value.length;  
  4.         for ( var i = 0; i < value.length; i++) {  
  5.             if (value.charCodeAt(i) > 127) {  
  6.                 length++;  
  7.             }  
  8.         }  
  9.         return this.optional(element) || (length <= param);  
  10.     }, $.validator.format("不能超过{0}个字节(一个中文字算2个字节)"));  
jQuery.validator.addMethod() 方法,有三个参数,

第一个参数 :   “byteMaxLength”  是定义方法名,必须保证方法名唯一,是一个identifier标志。

第二个参数: 是下面这个回调(callback)函数:

[javascript]  view plain copy
  1. function(value, element, param) {  
  2.                 var length = value.length;  
  3.                 for ( var i = 0; i < value.length; i++) {  
  4.                     if (value.charCodeAt(i) > 127) {  
  5.                         length++;  
  6.                     }  
  7.                 }  
  8.                 return this.optional(element) || (length <= param);  
  9.             }  
回调函数有三个参数:

              第一个:value ,是当前验证的元素的值。

              第二个: element  是当前被验证的元素。

             第三个:是传入的参数,例如: min : 5  这个参数为5,   对于本方法调用的时候,例如:byteMaxLength:10  其中10为传入参数。

这个方法的方法名为: byteMaxLength  回调函数如上,

回调函数的作用就是验证输入的为多少个字节,其中一个汉字代表两个字符,字符为0-127的ASCII码,其中有一句返回:

return  this.optional(element)   这个函数调用的意思是: 用于表单输入值不为空时验证,当field为空时,即element的值为空,this.optional(element) = true, 就是说该filed不是必填项,当不填时也通过验证, 如果element的值不为空  this.optional(element) = false 就要根据  ||  后面的验证来判断返回为true 或false的目的,总结起来 this.optional(element) 就是为了说明  当前验证的 field不是必填项。

第三个参数:  如下:

[javascript]  view plain copy
  1. $.validator.format("不能超过{0}个字节(一个中文字算2个字节)")  
这第三个参数可以直接是一个message 就是验证的提示信息,  为了显示函数的验证的信息,这个参数也可以通过创建函数 jQuery.validator.format(value) 来显 示, 其中 {0} 代表 该方法 的参数如果  方法调用如: byteMaxLength : 10  上面的输入就是 不能超过10个字节,(一个中文字算两个字节)


下面看一下这段代码:

[javascript]  view plain copy
  1. $( "#frm" ).validate({  
  2.         rules: {  
  3.                 username: {  
  4.                         required: true,  
  5.                         minlength: 4,  
  6.                         maxlength: 20,  
  7.                         byteMaxLength:20,  
  8.                         valiEnglish:true  
  9.                 },  
  10.                 postcode: {  
  11.                      postcodeVal:true  
  12.                     },  
  13.                 number: {  
  14.                     byteMaxLength:5,  
  15.                     numFormat:5  
  16.                     },  
  17.                     identifier: {  
  18.                     sfzhValidate:true     
  19.                  }  
  20.                       
  21.                       
  22.                   
  23.         },  
  24.         messages: {  
  25.                 username: {  
  26.                         required: "请输入用户名4--20个英文字符",  
  27.                         minlength: $.format("Keep typing, at least {0} characters required!"),  
  28.                         maxlength: $.format("Whoa! Maximum {0} characters allowed!")  
  29.                 },  
  30.                 number: {  
  31.                        numFormat: $.format("请输入{0}数字")  
  32.                     }  
  33.         }  
  34. });  
首先这是一个方法调用 
[javascript]  view plain copy
  1. $( "#frm" ).validate([options])  
验证选择的表单,方法的参数是可选项,可以输入0个或者键值对(key/value)

这个方法是为了 处理例如:submit , focus ,  keyup , blur, click 触发验证的,对象是整个表单的元素,或者是单个元素,使用rules和 messages 定义验证的元素,使用errorClass, errorElement, wrapper, errorLabelContainer, errorContainer, showErrors, success, errorPlacement, highlight, unhighlight, and ignoreTitle去控制非法元素的错误信息显示。

下面看 validate 的方法  rules();

返回 第一个选择的元素的验证的规则, 有若干种方式定义验证规则。

rules 方法定义了基于id的验证,

[javascript]  view plain copy
  1. username: {  
  2.                          required: true,  
  3.                          minlength: 4,  
  4.                          maxlength: 20,  
  5.                          byteMaxLength:20,  
  6.                          valiEnglish:true  
  7.                  }  
如上:其中,username为 id名, {}中为定义的验证方法,就是这个id 的都需要哪些方法验证,方法名就是上面讲到的方法;

这样就定义了。

messages中定义了 : 

[javascript]  view plain copy
  1. username: {  
  2.                          required: "请输入用户名4--20个英文字符",  
  3.                          minlength: $.format("Keep typing, at least {0} characters required!"),  
  4.                          maxlength: $.format("Whoa! Maximum {0} characters allowed!")  
  5.                  }  
这个id中方法验证错误提示信息。其中可以直接输出message或者调用 $.format()方法。

上面的标准格式就是:

var $params {debug:falserules:{}messages:{}};

 $("#frm").validate($params);

rules{}中定义验证规则的方法。 messages{}定义错误输出。

以上为第一种方式:

第二种方式:和第一种基本差不多:

[javascript]  view plain copy
  1. "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. "http://www.w3.org/1999/xhtml">  
  3.   
  4. "Content-Type" content="text/html; charset=gb2312" />  
  5.   
  6. "text/javascript" src="js/jquery-1.6.1.min.js">  
  7. "text/javascript" src="js/jquery.validate.js">  
  8. "text/javascript" src="js/jquery.metadata.js">  
  9. "text/javascript" src="js/messages_zh.js">  
  10. "text/css">  
  11.     #frm label.error {  
  12.         color: Red;  
  13.     }  
  14.   
  15.   
  16. "text/javascript">  
  17.   
  18. $(document).ready(function(){  
  19.    $("#clickme").click(function(){  
  20.          alert("Hello World");  
  21.   });  
  22.     
  23.     
  24.   jQuery.validator.addMethod("byteMaxLength"function(value,  
  25.                     element, param) {  
  26.                 var length = value.length;  
  27.                 for ( var i = 0; i < value.length; i++) {  
  28.                     if (value.charCodeAt(i) > 127) {  
  29.                         length++;  
  30.                     }  
  31.                 }  
  32.                 return this.optional(element) || (length <= param);  
  33.             }, $.validator.format("不能超过{0}个字节(一个中文字算2个字节)"));  
  34.     
  35.   jQuery.validator.addMethod("numFormat",function(value,element,param){  
  36.              return this.optional(element) ||  /^\d*$/.test(value);  
  37.             },$.validator.format("请输入数字{0}位以内")  
  38.             );  
  39.               
  40.               
  41.                
  42.             //number(9,3)  
  43.             jQuery.validator.addMethod("numFormat63",function(value,element){  
  44.              return this.optional(element) || /^[0-9]{1,6}(\.\d{1,3})$/.test(value);  
  45.             },$.validator.format("请输入合法数字,精度格式123456.0")  
  46.             );  
  47.               
  48.               
  49.             jQuery.validator.addMethod("postcodeVal",function(value,element){  
  50.              return this.optional(element) || /^[0-9]\d{5}(?!\d)$/.test(value);  
  51.             },$.validator.format("请输入合法的邮编")  
  52.             );  
  53.               
  54.             jQuery.validator.addMethod("numberAndLettersVal",function(value,element){  
  55.              return this.optional(element) || /^[a-zA-Z0-9]+$/.test(value);  
  56.             },$.validator.format("请输入字母或数字")  
  57.             );  
  58.               
  59.               
  60.               
  61.             jQuery.validator.addMethod("sfzhValidate",function(value,element){  
  62.              return this.optional(element) || /^(\d{14}|\d{17})(\d|[xX])$/.test(value);  
  63.             },$.validator.format("请输入合法身份证号")  
  64.             );  
  65.               
  66.               
  67.               
  68.             jQuery.validator.addMethod("valiEnglish",function(value,element){  
  69.              return this.optional(element) || /^[a-zA-Z ]*$/.test(value);  
  70.             },$.validator.format("请输入字母或者空格")  
  71.             );  
  72.               
  73.             $("#frm").validate();  
  74.           
  75.             check_infor();  
  76.   
  77. });  
  78.   
  79. function check_infor(){  
  80.       
  81.      $("#username").attr("class","{byteMaxLength:22,valiEnglish:true}");  
  82.    $("#postcode").attr("class","{byteMaxLength:6,postcodeVal:true}");  
  83.      
  84.      
  85.     $("#number").attr("class","{byteMaxLength:6,numFormat:6}");  
  86.     $("#identifier").attr("class","{sfzhValidate:true}");  
  87.        
  88.       
  89.       
  90.     }  
  91.   
  92.   
  93.   
  94.   
  95. "frm" name="frm" method="post" action="">
  96.     "text" name="username" id="username" />  
  97.   
  98.   

      

  99.       
  100.     
  101.     "text" name="postcode" id="postcode" />  
  102.       
  103.       
  104.   

      
  105.   

  106.     "text" name="number" id="number" />  
  107.     
  108.     
  109.     "text" name="identifier" id="identifier" />  
  110.       
  111.        
  112.   
  113.   "button" name="clickme"  id="clickme" value="click me" />  
  114.     
  115.   

      
  116.   
  117.   
  118.   

以上为第二种方式的代码:其中:

方法定义和第一种一样:在于调用:

[javascript]  view plain copy
  1. function check_infor(){  
  2.       
  3.      $("#username").attr("class","{byteMaxLength:22,valiEnglish:true}");  
  4.    $("#postcode").attr("class","{byteMaxLength:6,postcodeVal:true}");  
  5.      
  6.      
  7.     $("#number").attr("class","{byteMaxLength:6,numFormat:6}");  
  8.     $("#identifier").attr("class","{sfzhValidate:true}");  
  9.       
  10.     }  
其中定义了一个javascript方法专门用于为form表单中需要验证的id进行验证:

其中用到了.attr()  方法:这个方法有很多种参数形式 .attr(attributeName,value)方法

attributeName为参数名:  value 为参数值

其中下面means 是为 id为username的 元素 的 class 属性 添加值:

[javascript]  view plain copy
  1. "{byteMaxLength:22,valiEnglish:true}"  
[javascript]  view plain copy
  1. $("#username").attr("class","{byteMaxLength:22,valiEnglish:true}");  

这样该id元素就有了验证。

注意: 在自定义的check_infor()调用之前 ,必须首先调用$("#frm").valudate();方法;

第三种方式:

[javascript]  view plain copy
  1. "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. "http://www.w3.org/1999/xhtml">  
  3.   
  4. "Content-Type" content="text/html; charset=gb2312" />  
  5.   
  6. "text/javascript" src="js/jquery-1.6.1.min.js">  
  7. "text/javascript" src="js/jquery.validate.js">  
  8. "text/javascript" src="js/jquery.metadata.js">  
  9. "text/javascript" src="js/messages_zh.js">  
  10. "text/css">  
  11.     #frm label.error {  
  12.         color: Red;  
  13.     }  
  14.   
  15.   
  16. "text/javascript">  
  17.   
  18. $(document).ready(function(){  
  19.    $("#clickme").click(function(){  
  20.          alert("Hello World");  
  21.   });  
  22.      
  23.    jQuery.validator.addMethod("byteMaxLength"function(value,  
  24.                     element, param) {  
  25.                 var length = value.length;  
  26.                 for ( var i = 0; i < value.length; i++) {  
  27.                     if (value.charCodeAt(i) > 127) {  
  28.                         length++;  
  29.                     }  
  30.                 }  
  31.                 return this.optional(element) || (length <= param);  
  32.             }, $.validator.format("不能超过{0}个字节(一个中文字算2个字节)"));  
  33.     
  34.    jQuery.validator.addMethod("numFormat",function(value,element,param){  
  35.              return this.optional(element) ||  /^\d*$/.test(value);  
  36.             },$.validator.format("请输入数字{0}位以内")  
  37.             );  
  38.               
  39.               
  40.                
  41.             //number(9,3)  
  42.             jQuery.validator.addMethod("numFormat63",function(value,element){  
  43.              return this.optional(element) || /^[0-9]{1,6}(\.\d{1,3})$/.test(value);  
  44.             },$.validator.format("请输入合法数字,精度格式123456.0")  
  45.             );  
  46.               
  47.               
  48.             jQuery.validator.addMethod("postcodeVal",function(value,element){  
  49.              return this.optional(element) || /^[0-9]\d{5}(?!\d)$/.test(value);  
  50.             },$.validator.format("请输入合法的邮编")  
  51.             );  
  52.               
  53.             jQuery.validator.addMethod("numberAndLettersVal",function(value,element){  
  54.              return this.optional(element) || /^[a-zA-Z0-9]+$/.test(value);  
  55.             },$.validator.format("请输入字母或数字")  
  56.             );  
  57.               
  58.               
  59.               
  60.             jQuery.validator.addMethod("sfzhValidate",function(value,element){  
  61.              return this.optional(element) || /^(\d{14}|\d{17})(\d|[xX])$/.test(value);  
  62.             },$.validator.format("请输入合法身份证号")  
  63.             );  
  64.               
  65.               
  66.               
  67.             jQuery.validator.addMethod("valiEnglish",function(value,element){  
  68.              return this.optional(element) || /^[a-zA-Z ]*$/.test(value);  
  69.             },$.validator.format("请输入字母或者空格")  
  70.             );  
  71.               
  72.         $("#frm").validate();  
  73.         $('#username').rules('add', { required: true,  byteMaxLength:20,valiEnglish:true});  
  74.                 $('#postcode').rules('add', { postcodeVal:true});  
  75.                 $('#number').rules('add', { byteMaxLength:5,numFormat:5});  
  76.                 $('#identifier').rules('add', { sfzhValidate:true});  
  77.    
  78.           
  79. });  
  80.   
  81.   
  82.   
  83.   
  84.   
  85.   
  86. "frm" name="frm" method="post" action="">
  87.     "text" name="username" id="username" />  
  88.   
  89.   

      

  90.       
  91.     
  92.     "text" name="postcode" id="postcode" />  
  93.       
  94.       
  95.   

      
  96.   

  97.     "text" name="number" id="number" />  
  98.     
  99.     
  100.     "text" name="identifier" id="identifier" />  
  101.       
  102.        
  103.   
  104.   "button" name="clickme"  id="clickme" value="click me" />  
  105.     
  106.   

      
  107.   
  108.   
  109.   

第三种方式与其他两种方式不同的地方就是:

[javascript]  view plain copy
  1. $('#username').rules('add', { required: true,  byteMaxLength:20,valiEnglish:true});  
  2. $('#postcode').rules('add', { postcodeVal:true});  
  3. $('#number').rules('add', { byteMaxLength:5,numFormat:5});  
  4. $('#identifier').rules('add', { sfzhValidate:true});  

为每一个单独的元素添加验证规则。其中调用了 rules( "add", rules ) 方法:

增加验证规则为匹配的元素。

注意:$("form").validate()方法必须首先被调用。

这个规则也能包含一个messages-object,定义常用的messages。

文章出处:http://blog.csdn.net/topwqp/article/details/8561084

你可能感兴趣的:(jQuery)