jqueryValidator自定義校驗規則的一種方式（不覆蓋源碼）
阿新 • • 發佈：2017-10-31
|| util isdigit tgt car col bug 特殊字符 new
1.封裝自定義驗證方法-validate-methods.js
/***************************************************************** jQuery Validate擴展驗證方法 (linjq) *****************************************************************/ $(function(){ // 判斷整數value是否等於0 jQuery.validator.addMethod("isIntEqZero", function(value, element) { value=parseInt(value); return this.optional(element) || value==0; }, "整數必須為0"); // 判斷整數value是否大於0 jQuery.validator.addMethod("isIntGtZero", function(value, element) { value=parseInt(value); return this.optional(element) || value>0; },"整數必須大於0"); // 判斷整數value是否大於或等於0 jQuery.validator.addMethod("isIntGteZero", function(value, element) { value=parseInt(value); return this.optional(element) || value>=0; }, "整數必須大於或等於0"); // 判斷整數value是否不等於0 jQuery.validator.addMethod("isIntNEqZero", function(value, element) { value=parseInt(value); return this.optional(element) || value!=0; }, "整數必須不等於0"); // 判斷整數value是否小於0 jQuery.validator.addMethod("isIntLtZero", function(value, element) { value=parseInt(value); return this.optional(element) || value<0; }, "整數必須小於0"); // 判斷整數value是否小於或等於0 jQuery.validator.addMethod("isIntLteZero", function(value, element) { value=parseInt(value); return this.optional(element) || value<=0; }, "整數必須小於或等於0"); // 判斷浮點數value是否等於0 jQuery.validator.addMethod("isFloatEqZero", function(value, element) { value=parseFloat(value); return this.optional(element) || value==0; }, "浮點數必須為0"); // 判斷浮點數value是否大於0 jQuery.validator.addMethod("isFloatGtZero", function(value, element) { value=parseFloat(value); return this.optional(element) || value>0; }, "浮點數必須大於0"); // 判斷浮點數value是否大於或等於0 jQuery.validator.addMethod("isFloatGteZero", function(value, element) { value=parseFloat(value); return this.optional(element) || value>=0; }, "浮點數必須大於或等於0"); // 判斷浮點數value是否不等於0 jQuery.validator.addMethod("isFloatNEqZero", function(value, element) { value=parseFloat(value); return this.optional(element) || value!=0; }, "浮點數必須不等於0"); // 判斷浮點數value是否小於0 jQuery.validator.addMethod("isFloatLtZero", function(value, element) { value=parseFloat(value); return this.optional(element) || value<0; }, "浮點數必須小於0"); // 判斷浮點數value是否小於或等於0 jQuery.validator.addMethod("isFloatLteZero", function(value, element) { value=parseFloat(value); return this.optional(element) || value<=0; }, "浮點數必須小於或等於0"); // 判斷浮點型 jQuery.validator.addMethod("isFloat", function(value, element) { return this.optional(element) || /^[-\+]?\d+(\.\d+)?$/.test(value); }, "只能包含數字、小數點等字符"); // 匹配integer jQuery.validator.addMethod("isInteger", function(value, element) { return this.optional(element) || (/^[-\+]?\d+$/.test(value) && parseInt(value)>=0); }, "匹配integer"); // 判斷數值類型，包括整數和浮點數 jQuery.validator.addMethod("isNumber", function(value, element) { return this.optional(element) || /^[-\+]?\d+$/.test(value) || /^[-\+]?\d+(\.\d+)?$/.test(value); }, "匹配數值類型，包括整數和浮點數"); // 只能輸入[0-9]數字 jQuery.validator.addMethod("isDigits", function(value, element) { return this.optional(element) || /^\d+$/.test(value); }, "只能輸入0-9數字"); // 判斷中文字符 jQuery.validator.addMethod("isChinese", function(value, element) { return this.optional(element) || /^[\u0391-\uFFE5]+$/.test(value); }, "只能包含中文字符。"); // 判斷英文字符 jQuery.validator.addMethod("isEnglish", function(value, element) { return this.optional(element) || /^[A-Za-z]+$/.test(value); }, "只能包含英文字符。"); // 手機號碼驗證 jQuery.validator.addMethod("isMobile", function(value, element) { var length = value.length; return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(value)); }, "請正確填寫您的手機號碼。"); // 電話號碼驗證 jQuery.validator.addMethod("isPhone", function(value, element) { var tel = /^(\d{3,4}-?)?\d{7,9}$/g; return this.optional(element) || (tel.test(value)); }, "請正確填寫您的電話號碼。"); // 聯系電話(手機/電話皆可)驗證 jQuery.validator.addMethod("isTel", function(value,element) { var length = value.length; var mobile = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/; var tel = /^(\d{3,4}-?)?\d{7,9}$/g; return this.optional(element) || tel.test(value) || (length==11 && mobile.test(value)); }, "請正確填寫您的聯系方式"); // 匹配qq jQuery.validator.addMethod("isQq", function(value, element) { return this.optional(element) || /^[1-9]\d{4,12}$/; }, "匹配QQ"); // 郵政編碼驗證 jQuery.validator.addMethod("isZipCode", function(value, element) { var zip = /^[0-9]{6}$/; return this.optional(element) || (zip.test(value)); }, "請正確填寫您的郵政編碼。"); // 匹配密碼，以字母開頭，長度在6-12之間，只能包含字符、數字和下劃線。 jQuery.validator.addMethod("isPwd", function(value, element) { return this.optional(element) || /^[a-zA-Z]\\w{6,12}$/.test(value); }, "以字母開頭，長度在6-12之間，只能包含字符、數字和下劃線。"); // 身份證號碼驗證 jQuery.validator.addMethod("isIdCardNo", function(value, element) { //var idCard = /^(\d{6})()?(\d{4})(\d{2})(\d{2})(\d{3})(\w)$/; return this.optional(element) || isIdCardNo(value); }, "請輸入正確的身份證號碼。"); // IP地址驗證 jQuery.validator.addMethod("ip", function(value, element) { return this.optional(element) || /^(([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))\.)(([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))\.){2}([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))$/.test(value); }, "請填寫正確的IP地址。"); // 字符驗證，只能包含中文、英文、數字、下劃線等字符。 jQuery.validator.addMethod("stringCheck", function(value, element) { return this.optional(element) || /^[a-zA-Z0-9\u4e00-\u9fa5-_]+$/.test(value); }, "只能包含中文、英文、數字、下劃線等字符"); // 匹配english jQuery.validator.addMethod("isEnglish", function(value, element) { return this.optional(element) || /^[A-Za-z]+$/.test(value); }, "匹配english"); // 匹配漢字 jQuery.validator.addMethod("isChinese", function(value, element) { return this.optional(element) || /^[\u4e00-\u9fa5]+$/.test(value); }, "匹配漢字"); // 匹配中文(包括漢字和字符) jQuery.validator.addMethod("isChineseChar", function(value, element) { return this.optional(element) || /^[\u0391-\uFFE5]+$/.test(value); }, "匹配中文(包括漢字和字符) "); // 判斷是否為合法字符(a-zA-Z0-9-_) jQuery.validator.addMethod("isRightfulString", function(value, element) { return this.optional(element) || /^[A-Za-z0-9_-]+$/.test(value); }, "判斷是否為合法字符(a-zA-Z0-9-_)"); // 判斷是否包含中英文特殊字符，除英文"-_"字符外 jQuery.validator.addMethod("isContainsSpecialChar", function(value, element) { var reg = RegExp(/[(\ )(\`)(\~)(\!)(\@)(\#)(\$)(\%)(\^)(\&)(\*)(\()(\))(\+)(\=)(\|)(\{)(\})(\‘)(\:)(\;)(\‘)(‘,)(\[)(\])(\.)(\<)(\>)(\/)(\?)(\~)(\！)(\@)(\#)(\￥)(\%)(\…)(\&)(\*)(\（)(\）)(\—)(\+)(\|)(\{)(\})(\【)(\】)(\‘)(\；)(\：)(\”)(\“)(\’)(\。)(\，)(\、)(\？)]+/); return this.optional(element) || !reg.test(value); }, "含有中英文特殊字符"); //身份證號碼的驗證規則 function isIdCardNo(num){ //if (isNaN(num)) {alert("輸入的不是數字！"); return false;} var len = num.length, re; if (len == 15) re = new RegExp(/^(\d{6})()?(\d{2})(\d{2})(\d{2})(\d{2})(\w)$/); else if (len == 18) re = new RegExp(/^(\d{6})()?(\d{4})(\d{2})(\d{2})(\d{3})(\w)$/); else { //alert("輸入的數字位數不對。"); return false; } var a = num.match(re); if (a != null) { if (len==15) { var D = new Date("19"+a[3]+"/"+a[4]+"/"+a[5]); var B = D.getYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5]; } else { var D = new Date(a[3]+"/"+a[4]+"/"+a[5]); var B = D.getFullYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5]; } if (!B) { //alert("輸入的身份證號 "+ a[0] +" 裏出生日期不對。"); return false; } } if(!re.test(num)){ //alert("身份證最後一位只能是數字和字母。"); return false; } return true; } }); //車牌號校驗 function isPlateNo(plateNo){ var re = /^[\u4e00-\u9fa5]{1}[A-Z]{1}[A-Z_0-9]{5}$/; if(re.test(plateNo)){ return true; } return false; }
2.測試-validate-methods.jsp(引入自定義的validate-methods.js)（在js代碼中校驗）
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>jQuery Validate擴展驗證方法</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <script type="text/javascript" src="<%=request.getContextPath()%>/validate/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="<%=request.getContextPath()%>/validate/jquery.validate.min.js"></script> <script type="text/javascript" src="<%=request.getContextPath()%>/validate/jquery.metadata.min.js"></script> <script type="text/javascript" src="<%=request.getContextPath()%>/validate/validate-methods.js"></script> <script type="text/javascript" src="<%=request.getContextPath()%>/validate/messages_zh.js"></script> <script type="text/javascript"> $(function(){ var validate = $("#myform").validate({ debug: true, //調試模式取消submit的默認提交功能 submitHandler: function(form){ //表單提交句柄,為一回調函數，帶一個參數：form alert("提交表單"); form.submit(); //提交表單 }, rules:{ zero:{ //isIntEqZero:true //isFloat:true //isInteger:true //isNumber:true //isMobile:true //isPhone:true //isTel:true //isIdCardNo:true //isRightfulString:true isContainsSpecialChar:true } }, //如果驗證控件沒有message，將調用默認的信息 messages:{ zero:{ //isIntEqZero:"請輸入0" //isFloat:"請輸入浮點數" //isInteger:"請輸入整數" } } }); }); </script> </head> <body> <form id="myform" method="post" action=""> <p> <label for="zero">輸入框：</label> <!-- id和name最好同時寫上 --> <input id="zero" name="zero" /> </p> <p> <input class="submit" type="submit" value="驗證" /> </p> </form> </body> </html>
或者這樣寫(在標簽中校驗)：
<body> <form id="myform" method="post" action=""> <p> <label for="zero">輸入框：</label> <!-- id和name最好同時寫上 --> <input id="zero" name="zero" /> </p> <p> <input class="submit" type="submit" value="驗證" data-rule-isIntEqZero="true" /> </p> </form> </body>
jqueryValidator自定義校驗規則的一種方式（不覆蓋源碼）