jQuery validate验证

来源:互联网 发布:精解windows 10 pdf 编辑:程序博客网 时间:2024/06/03 21:56

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

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

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

第一步:引入插件

<script type="text/JavaScript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.metadata.js"></script>
<script type="text/javascript" src="js/messages_zh.js"></script>

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

<style type="text/css">
#frm label.error {
color: Red;
}
</style>

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

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

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

先看效果图:


[javascript] view plain copy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5.   
  6. <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>  
  7. <script type="text/javascript" src="js/jquery.validate.js"></script>  
  8. <script type="text/javascript" src="js/jquery.metadata.js"></script>  
  9. <script type="text/javascript" src="js/messages_zh.js"></script>  
  10. <style type="text/css">  
  11.     #frm label.error {  
  12.         color: Red;  
  13.     }  
  14. </style>  
  15. </head>  
  16. <script type="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. </script>  
  117. <body>  
  118. <form id="frm" name="frm" method="post" action=""><label>用 户 名:  
  119.     <input type="text" name="username" id="username" />  
  120. </label>  
  121.   <p>  
  122.     <label>邮       编 :<label></label></label>  
  123.     <label>  
  124.     <input type="text" name="postcode" id="postcode" />  
  125.     <br />  
  126.     </label>  
  127.   </p>  
  128.   <p><label>数      字 :   
  129.     <input type="text" name="number" id="number" />  
  130.   </label>  
  131.     <br /><label>身份证号:  
  132.     <input type="text" name="identifier" id="identifier" />  
  133.     </label>  
  134.        
  135.   <label>  
  136.   <input type="button" name="clickme"  id="clickme" value="click me" />  
  137.   </label>  
  138.   </p>  
  139. </form>  
  140. </body>  
  141. </html>  


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

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

[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. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5.   
  6. <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>  
  7. <script type="text/javascript" src="js/jquery.validate.js"></script>  
  8. <script type="text/javascript" src="js/jquery.metadata.js"></script>  
  9. <script type="text/javascript" src="js/messages_zh.js"></script>  
  10. <style type="text/css">  
  11.     #frm label.error {  
  12.         color: Red;  
  13.     }  
  14. </style>  
  15. </head>  
  16. <script type="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. </script>  
  94. <body>  
  95. <form id="frm" name="frm" method="post" action=""><label>用 户 名:  
  96.     <input type="text" name="username" id="username" />  
  97. </label>  
  98.   <p>  
  99.     <label>邮       编 :<label></label></label>  
  100.     <label>  
  101.     <input type="text" name="postcode" id="postcode" />  
  102.     <br />  
  103.     </label>  
  104.   </p>  
  105.   <p><label>数      字 :   
  106.     <input type="text" name="number" id="number" />  
  107.   </label>  
  108.     <br /><label>身份证号:  
  109.     <input type="text" name="identifier" id="identifier" />  
  110.     </label>  
  111.        
  112.   <label>  
  113.   <input type="button" name="clickme"  id="clickme" value="click me" />  
  114.   </label>  
  115.   </p>  
  116. </form>  
  117. </body>  
  118. </html>  

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

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

[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. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5.   
  6. <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>  
  7. <script type="text/javascript" src="js/jquery.validate.js"></script>  
  8. <script type="text/javascript" src="js/jquery.metadata.js"></script>  
  9. <script type="text/javascript" src="js/messages_zh.js"></script>  
  10. <style type="text/css">  
  11.     #frm label.error {  
  12.         color: Red;  
  13.     }  
  14. </style>  
  15. </head>  
  16. <script type="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. </script>  
  85. <body>  
  86. <form id="frm" name="frm" method="post" action=""><label>用 户 名:  
  87.     <input type="text" name="username" id="username" />  
  88. </label>  
  89.   <p>  
  90.     <label>邮       编 :<label></label></label>  
  91.     <label>  
  92.     <input type="text" name="postcode" id="postcode" />  
  93.     <br />  
  94.     </label>  
  95.   </p>  
  96.   <p><label>数      字 :   
  97.     <input type="text" name="number" id="number" />  
  98.   </label>  
  99.     <br /><label>身份证号:  
  100.     <input type="text" name="identifier" id="identifier" />  
  101.     </label>  
  102.        
  103.   <label>  
  104.   <input type="button" name="clickme"  id="clickme" value="click me" />  
  105.   </label>  
  106.   </p>  
  107. </form>  
  108. </body>  
  109. </html>  

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

[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。

原创粉丝点击
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防,我是瞎子 黑莓手机id锁了怎么办 美图手机进水了怎么办 球兰叶子发黄软怎么办 蟹爪莲叶子发红怎么办 保险箱没电了打不开怎么办 宁波臭冬瓜酸的怎么办 甜酒酿做了酸了怎么办 孕妇喝了醪糟汤怎么办 鱼侧翻但又没死怎么办 原汁机盖子卡死怎么办 惠人原汁机坏了怎么办 泡芙鸡蛋加多了怎么办 淡奶油打过了怎么办 淡奶油打发过了怎么办 雷神锤子被捏碎怎么办 私处毛很多很黑怎么办 脸上长黑色的毛怎么办 十字军之王2毁容怎么办 多囊卵巢综合症想怀孕怎么办 12306账户名忘了怎么办 丧尸病毒爆发了怎么办 看了鬼故事害怕怎么办 微信验证码忘了怎么办 微拉美后脸变形怎么办 感情不好心好累怎么办 刚买乌龟不吃食怎么办 新小乌龟不吃食怎么办 吃太多了好难受怎么办 已经吃了苦丝瓜怎么办 墨兰叶子尖发黄怎么办 气膜建筑停电了怎么办 脖子转一下就痛怎么办 手抄报空的地方怎么办 20多岁白发很多怎么办 被红火蚁咬了怎么办 现在不能翻墙了怎么办 手机云空间满了怎么办 手机百度云满了怎么办 华为云相册满了怎么办 苹果7icloud满了怎么办 我的世界秒退怎么办