Jquery .validate.min的用法

  1. </head>  
  2. <body>  
  3.     <form id="cerform" runat="server">  
  4.    <div>  
  5.                           <span class="span9"><b>*</b>用户真实姓名</span><input id="txtUserName" runat="server" class="input1 ipt_txt"  
  6.                                 type="text" />  
  7.                                 <span class="span10">请输入您的真实姓名</span></div>  
  8.                         <div class="clear height20">  
  9.                         </div>  
  10.                         <div>  
  11.                             <span class="span9"><b>*</b>身份证号码</span><input id="txtUserCardID" runat="server"  
  12.                                 class="input1 input2 ipt_txt" type="text" /><span class="span10">请输入您的身份证号码</span></div>  
  13.                         <div class="clear height20">  
  14.                         </div>  
  15.                         <div>  
  16.                             <span class="span9"><b>*</b>认证说明</span><textarea id="txtAreaContent" runat="server"></textarea><span class="span10">请完善认证说明，成功认证后，将出现在您的认证说明介绍中</span></div>  
  17.                         <div class="clear height20">  
  18.                         </div>  
  19.                         <div>  
  20.                             <span class="span9"><b>*</b>联系邮箱</span><input id="txtEmail" class="input1 ipt_txt" type="text" runat="server"/><span  
  21.                                 class="span10">请输入您的电子邮箱</span></div>  
  22.                         <div class="clear height20">  
  23.                         </div>  
  24.                         <div>  
  25.                             <span class="span9"><b>*</b>手机号码</span><input id="txtPhone" class="input1 ipt_txt" type="text" runat="server"/><span  
  26.                                 class="span10">请输入能联系上您的手机号码</span></div>  
  27.                         <div class="clear height20">  
  28.                         </div>  
  29.                         <div>  
  30.                             <span class="span9"></span>  
  31.                             <input type="submit" class="button_a" value="提交认证" /></div>  
  32.     </form>  
  33. </body>  
  34. </html>  

js:

  1. //判断两个值是否相等  
  2. jQuery.validator.addMethod("notEqualTo", function (value, element, param) {  
  3.     return value != $(param).val();  
  4. }, $.validator.format("两次输入不能相同!"));  
  5.   
  6.   
  7. //只能输入数字  
  8. jQuery.validator.addMethod("isNum", function (value, element) {  
  9.     var RegExp = /^\d+$/;  
  10.     return RegExp.test(value);  
  11. }, $.validator.format("只能为数字!"));  
  12.   
  13.   
  14. //规则名：buga,value检测对像的值    
  15. $.validator.addMethod("buga", function (value) {  
  16.     return value == "buga";  
  17. }, 'Please enter "buga"!');  
  18.   
  19.   
  20. //规则名：chinese，value检测对像的值，element检测的对像    
  21. $.validator.addMethod("chinese", function (value, element) {  
  22.     var chinese = /^[\u4e00-\u9fa5]+$/;  
  23.     return (chinese.test(value)) || this.optional(element);  
  24. }, "只能输入中文");  
  25.   
  26.   
  27. //规则名：byteRangeLength，value检测对像的值，element检测的对像,param参数    
  28. jQuery.validator.addMethod("byteRangeLength", function (value, element, param) {  
  29.     var length = value.length;  
  30.     for (var i = 0; i < value.length; i++) {  
  31.         if (value.charCodeAt(i) > 127) {  
  32.             length++;  
  33.         }  
  34.     }  
  35.     return this.optional(element) || (length >= param[0] && length <= param[1]);  
  36. }, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));  
  37.   
  38.   
  39. // 联系电话(手机/电话皆可)验证  
  40. jQuery.validator.addMethod("isPhone", function (value, element) {  
  41.     var length = value.length;  
  42.     var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;  
  43.     var tel = /^\d{3,4}-?\d{7,9}$/;  
  44.     return this.optional(element) || (tel.test(value) || mobile.test(value));  
  45.   
  46.   
  47. }, "请正确填写您的联系电话");  
  48.   
  49.   
  50. // 邮政编码验证  
  51. jQuery.validator.addMethod("isZipCode", function (value, element) {  
  52.     var tel = /^[0-9]{6}$/;  
  53.     return this.optional(element) || (tel.test(value));  
  54. }, "请正确填写您的邮政编码");  
  55.   
  56.   
  57.   
  58.   
  59. // 字符验证  
  60. jQuery.validator.addMethod("string", function (value, element) {  
  61.     return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);  
  62. }, "不允许包含特殊符号!");  
  63.   
  64.   
  65. // 必须以特定字符串开头验证  
  66. jQuery.validator.addMethod("begin", function (value, element, param) {  
  67.     var begin = new RegExp("^" + param);  
  68.     return this.optional(element) || (begin.test(value));  
  69. }, $.validator.format("必须以 {0} 开头!"));  
  70.   
  71.   
  72. // 验证两次输入值是否不相同  
  73. jQuery.validator.addMethod("notEqualTo", function (value, element, param) {  
  74.     return value != $(param).val();  
  75. }, $.validator.format("两次输入不能相同!"));  
  76.   
  77.   
  78. // 验证值不允许与特定值等于  
  79. jQuery.validator.addMethod("notEqual", function (value, element, param) {  
  80.     return value != param;  
  81. }, $.validator.format("输入值不允许为{0}!"));  
  82.   
  83.   
  84. // 验证值必须大于特定值(不能等于)  
  85. jQuery.validator.addMethod("gt", function (value, element, param) {  
  86.     return value > param;  
  87. }, $.validator.format("输入值必须大于{0}!"));  
  88.   
  89.   
  90. // 验证值小数位数不能超过两位  
  91. jQuery.validator.addMethod("decimal", function (value, element) {  
  92.     var decimal = /^-?\d+(\.\d{1,2})?$/;  
  93.     return this.optional(element) || (decimal.test(value));  
  94. }, $.validator.format("小数位数不能超过两位!"));  
  95.   
  96.   
  97. //字母数字  
  98. jQuery.validator.addMethod("alnum", function (value, element) {  
  99.     return this.optional(element) || /^[a-zA-Z0-9]+$/.test(value);  
  100. }, "只能包括英文字母和数字");  
  101.   
  102.   
  103. // 汉字  
  104. jQuery.validator.addMethod("chcharacter", function (value, element) {  
  105.     var tel = /^[\u4e00-\u9fa5]+$/;  
  106.     return this.optional(element) || (tel.test(value));  
  107. }, "请输入汉字");  
  108.   
  109.   
  110. // 身份证号码验证（加强验证）  
  111. jQuery.validator.addMethod("isIdCardNo", function (value, element) {  
  112.     return this.optional(element) || /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/.test(value) || /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[A-Z])$/.test(value);  
  113. }, "请正确输入您的身份证号码");  
  114.   
  115.   
  116. // 手机号码验证  
  117. jQuery.validator.addMethod("isMobile", function (value, element) {  
  118.     var length = value.length;  
  119.     var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;  
  120.     return this.optional(element) || (length == 11 && mobile.test(value));  
  121. }, "请正确填写您的手机号码");  
  122.   
  123.   
  124. // 电话号码验证  
  125. jQuery.validator.addMethod("isTel", function (value, element) {  
  126.     var tel = /^\d{3,4}-?\d{7,9}$/;    //电话号码格式010-12345678  
  127.     return this.optional(element) || (tel.test(value));  
  128. }, "请正确填写您的电话号码");  
  129.   
  130.   
  131. //页面加载时调用  
  132. $(function () {  
  133.     $('#cerform').validate({  
  134.         rules: {  
  135.             txtUserName: {  
  136.                 required: true,  
  137.                 maxlength: 8,  
  138.                 minlength: 4  
  139.             },  
  140.             txtUserCardID: {  
  141.                 required: true,  
  142.                 maxlength: 18,  
  143.                 minlength: 18,  
  144.                 isIdCardNo: "#txtUserCardID"  
  145.             },  
  146.             txtUserPwd: {  
  147.                 required: true,  
  148.                 maxlength: 18,  
  149.                 minlength: 6,  
  150.                 notEqualTo: "#txtUserPwd"  
  151.             },  
  152.             txtRUserPwd: {  
  153.                 required: true,  
  154.                 equalTo: "#txtUserPwd"  
  155.             },  
  156.             txtAddress: {  
  157.                 required: true,  
  158.                 maxlength: 50  
  159.             },  
  160.             txtAreaContent: {  
  161.                 required: true,  
  162.                 maxlength: 300  
  163.             },  
  164.             txtUrl: {  
  165.                 required: true,  
  166.                 url: true  
  167.             },  
  168.             txtPhone: {  
  169.                 required: true,  
  170.                 minlength: 7,  
  171.                 maxlength: 13,  
  172.                 isTell: true,  
  173.                 isMobile: "#txtPhone"  
  174.             },  
  175.             txtZipCode: {  
  176.                 required: true,  
  177.                 minlength: 6,  
  178.                 maxlength: 6,  
  179.                 isNum: true  
  180.             },  
  181.             txtEmail: {  
  182.                 required: true,  
  183.                 email: true,  
  184.                 maxlength: 40  
  185.             }  
  186.         },  
  187.         messages: {  
  188.             txtUserName: {  
  189.                 required: "用户名不能为空！",  
  190.                 maxlength: "最长为18个字符！",  
  191.                 minlength: "最短为4个字符！",  
  192.                 remote: "该用户名已被占用！"  
  193.             },  
  194.             txtUserCardID: {  
  195.                 required: "身份证不能为空！",  
  196.                 maxlength: "身份证为18个字符！",  
  197.                 minlength: "身份证为18个字符！"  
  198.             },  
  199.             txtUserPwd: {  
  200.                 required: "密码不能为空！",  
  201.                 maxlength: "最长为18个字符！",  
  202.                 minlength: "最短为6个字符！",  
  203.                 notEqualTo: "用户名和密码不能相同！"  
  204.             },  
  205.             txtRUserPwd: {  
  206.                 required: "密码不能为空！",  
  207.                 equalTo: "两次输入密码不相同！"  
  208.             },  
  209.             txtAddress: {  
  210.                 required: "地址不能为空！",  
  211.                 maxlength: "最长50个字符！"  
  212.             },  
  213.             txtAreaContent: {  
  214.                 required: "不能为空！",  
  215.                 maxlength: "最长300个字符！"  
  216.             },  
  217.             txtUrl: {  
  218.                 required: "网址不能为空！",  
  219.                 url: "请填写正确的网址！"  
  220.             },  
  221.             txtPhone: {  
  222.                 required: "电话不能为空！",  
  223.                 minlength: "最少7个数字！",  
  224.                 maxlength: "最长13个数字！",  
  225.                 isTell: "电话格式不正确！"  
  226.             },  
  227.             txtZipCode: {  
  228.                 required: "邮编不能为空！",  
  229.                 minlength: "邮编为6个数字！",  
  230.                 maxlength: "邮编为6个数字！",  
  231.                 isNum: "请输入数字！"  
  232.             },  
  233.             txtEmail: {  
  234.                 required: "邮箱不能为空！",  
  235.                 email: "邮箱格式不正确！",  
  236.                 maxlength: "最长40个字符！"  
  237.             }  
  238.         },  
  239.         errorPlacement: function (error, element) {  
  240.             error.appendTo(element.parent());  
  241.         },  
  242.         submitHandler: function (form) {  
  243.             form.submit();  
  244.         },  
  245.         errorClass: "error",  
  246.         focusCleanup: true, //被验证的元素获得焦点时移除错误信息  
  247.         success: function (label) {  
  248.             label.html("<span style=\"color:green\">填写正确！</span>").addClass("success");  
  249.         }  
  250.     });  
  251.   
  252.   
  253.   
  254.   
  255.     //所有使用“.ipt_txt”样式的文本框加上效果，获得焦点文本框变成淡黄色  
  256.     $(".ipt_txt").focus(function () {  
  257.         $(this).css("background-color", "#FFFFCC").blur(function () {  
  258.             $(this).css("background-color", "#FBFBFB");  
  259.         });  
  260.     });  
  261. });  
posted on 2017-02-23 09:37  一切皆对象  阅读(1425)  评论(0)  编辑  收藏  举报