jQuery.Validate自定义规程的使用案例

  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=utf-8" />    
  5. <title>jquery.validate自定义规则的使用方法</title>    
  6. <script src="jquery.js" type="text/javascript"></script>    
  7. <script src="jquery.validate.min.js" type="text/javascript"></script>    
  8. <script type="text/javascript" language="javascript">    
  9.     
  10. //规则名：buga,value检测对像的值    
  11.     $.validator.addMethod("buga", function(value) {    
  12.         return value == "buga";    
  13.     }, 'Please enter "buga"!');    
  14. //规则名：chinese，value检测对像的值，element检测的对像    
  15.     $.validator.addMethod("chinese", function(value, element) {    
  16.         var chinese = /^[u4e00-u9fa5]+$/;    
  17.         return (chinese.test(value)) || this.optional(element);    
  18.     }, "只能输入中文");    
  19. //规则名：byteRangeLength，value检测对像的值，element检测的对像,param参数    
  20.     jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {    
  21.         var length = value.length;    
  22.         for (var i = 0; i < value.length; i++) {    
  23.             if (value.charCodeAt(i) > 127) {    
  24.                 length++;    
  25.             }    
  26.         }    
  27.         return this.optional(element) || (length >= param[0] && length <= param[1]);    
  28.     }, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));    
  29.         
  30. $(function(){    
  31.         
  32.         $("#form1").validate({    
  33.         rules: {    
  34.             username:{    
  35.                 required:true,    
  36.                 chinese:true,    
  37.                 byteRangeLength:[1,2]    
  38.                 }    
  39.             //username:"buga"    
  40.             //username:"chinese"    
  41.             //username:"byteRangeLength"            
  42.         }    
  43.         });    
  44.         
  45. });    
  46. </script>    
  47. </head>    
  48.     
  49. <body>    
  50.     
  51. <form id="form1" name="form1" method="post" action="">    
  52.   <p>    
  53.     <label for="username">用户名：</label>    
  54.     <input type="text" name="username" id="username"/>    
  55.   </p>    
  56.   <p>    
  57.     <input type="submit" name="button" id="button" value="提交" />    
  58.   </p>    
  59. </form>    
  60.     
  61. </body>    
  62. </html>  
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/BluceLee/p/4092241.html