Jquery .validate.min的用法

時間  2019-11-11
標籤 jquery validate.min validate min 用法 欄目 JQuery 简体版
原文   原文鏈接
  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:css

  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. });  
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程