1. 程式人生 > >jquery validate 自定義驗證方法 addMethod

jquery validate 自定義驗證方法 addMethod

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow

也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!

               
$(document).ready( function() {/** * 身份證號碼驗證 * */function isIdCardNo(num) var factorArr = new
Array(7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2,1); var parityBit=new Array("1","0","X","9","8","7","6","5","4","3","2"); var varArray = new Array(); var intValue; var lngProduct = 0var intCheckDigit; var intStrLen = num.length; var idNumber = num;   // initialize
     if ((intStrLen != 15) && (intStrLen != 18)) {         return false;     }     // check and set value     for(i=0;i<intStrLen;i++) {         varArray[i] = idNumber.charAt(i);         if
((varArray[i] < '0' || varArray[i] > '9') && (i != 17)) {             return false;         } else if (i < 17) {             varArray[i] = varArray[i] * factorArr[i];         }     }          if (intStrLen == 18) {         //check date         var date8 = idNumber.substring(6,14);         if (isDate8(date8) == false) {            return false;         }         // calculate the sum of the products         for(i=0;i<17;i++) {             lngProduct = lngProduct + varArray[i];         }         // calculate the check digit         intCheckDigit = parityBit[lngProduct % 11];         // check last digit         if (varArray[17] != intCheckDigit) {             return false;         }     }     else{        //length is 15         //check date         var date6 = idNumber.substring(6,12);         if (isDate6(date6) == false) {             return false;         }     }     return true;      }/** * 判斷是否為“YYYYMM”式的時期 * */function isDate6(sDate) {   if(!/^[0-9]{6}$/.test(sDate)) {      return false;   }   var year, month, day;   year = sDate.substring(0, 4);   month = sDate.substring(4, 6);   if (year < 1700 || year > 2500) return false   if (month < 1 || month > 12) return false   return true}/** * 判斷是否為“YYYYMMDD”式的時期 * */function isDate8(sDate) {   if(!/^[0-9]{8}$/.test(sDate)) {      return false;   }   var year, month, day;   year = sDate.substring(0, 4);   month = sDate.substring(4, 6);   day = sDate.substring(6, 8);   var iaMonthDays = [31,28,31,30,31,30,31,31,30,31,30,31]   if (year < 1700 || year > 2500) return false   if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) iaMonthDays[1]=29;   if (month < 1 || month > 12) return false   if (day < 1 || day > iaMonthDays[month - 1]) return false   return true// 身份證號碼驗證    jQuery.validator.addMethod("idcardno", function(value, element) {   return this.optional(element) || isIdCardNo(value);    }, "請正確輸入身份證號碼");   //字母數字 jQuery.validator.addMethod("alnum", function(value, element) {   return this.optional(element) || /^[a-zA-Z0-9]+$/.test(value); }, "只能包括英文字母和數字");  // 郵政編碼驗證 jQuery.validator.addMethod("zipcode", function(value, element) {   var tel = /^[0-9]{6}$/;   return this.optional(element) || (tel.test(value)); }, "請正確填寫郵政編碼");   // 漢字 jQuery.validator.addMethod("chcharacter", function(value, element) {   var tel = /^[\u4e00-\u9fa5]+$/;   return this.optional(element) || (tel.test(value)); }, "請輸入漢字");// 字元最小長度驗證(一箇中文字元長度為2)jQuery.validator.addMethod("stringMinLength", function(value, element, param) {var length = value.length;for ( var i = 0; i < value.length; i++) {if (value.charCodeAt(i) > 127) {length++;}}return this.optional(element) || (length >= param);}, $.validator.format("長度不能小於{0}!"));// 字元最大長度驗證(一箇中文字元長度為2)jQuery.validator.addMethod("stringMaxLength", function(value, element, param) {var length = value.length;for ( var i = 0; i < value.length; i++) {if (value.charCodeAt(i) > 127) {length++;}}return this.optional(element) || (length <= param);}, $.validator.format("長度不能大於{0}!"));// 字元驗證jQuery.validator.addMethod("string", function(value, element) {return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);}, "不允許包含特殊符號!");// 手機號碼驗證jQuery.validator.addMethod("mobile", function(value, element) {var length = value.length;return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/.test(value));}, "手機號碼格式錯誤!");// 電話號碼驗證jQuery.validator.addMethod("phone", function(value, element) {var tel = /^(\d{3,4}-?)?\d{7,9}$/g;return this.optional(element) || (tel.test(value));}, "電話號碼格式錯誤!");// 郵政編碼驗證jQuery.validator.addMethod("zipCode", function(value, element) {var tel = /^[0-9]{6}$/;return this.optional(element) || (tel.test(value));}, "郵政編碼格式錯誤!");// 必須以特定字串開頭驗證jQuery.validator.addMethod("begin", function(value, element, param) {var begin = new RegExp("^" + param);return this.optional(element) || (begin.test(value));}, $.validator.format("必須以 {0} 開頭!"));// 驗證兩次輸入值是否不相同jQuery.validator.addMethod("notEqualTo", function(value, element, param) {return value != $(param).val();}, $.validator.format("兩次輸入不能相同!"));// 驗證值不允許與特定值等於jQuery.validator.addMethod("notEqual", function(value, element, param) {return value != param;}, $.validator.format("輸入值不允許為{0}!"));// 驗證值必須大於特定值(不能等於)jQuery.validator.addMethod("gt", function(value, element, param) {return value > param;}, $.validator.format("輸入值必須大於{0}!"));// 驗證值小數位數不能超過兩位jQuery.validator.addMethod("decimal", function(value, element) {var decimal = /^-?\d+(\.\d{1,2})?$/;return this.optional(element) || (decimal.test(value));jQuery.validate 用法20100412日 星期一 14:33名稱                              返回型別                描述validate(options)          返回:Validator       驗證所選的FORMvalid()                           返回:Boolean        檢查是否驗證通過rules()                           返回:Options         返回元素的驗證規則rules(add,rules)            返回:Options         增加驗證規則rules(remove,rules)  jquery.validate是一個基於jquery的非常優秀的驗證框架,我們可以通過它迅速驗證一些常見的輸入,並且可以自己擴充自己的驗證方法,而且對國際化也有非常好的支援。jquery.validate 官方網址:http://bassistance.de/jquery-plugins/jquery-plugin-validation/使用用法:1、首先下載jquery.js和jquery.validate.js並引入js檔案(注意:jquery必須在jquery.validate.js 之前被引入,否則會報錯)<script type="text/javascript" src="jquery.js"></script>       <script type="text/javascript" src="jquery.validate.js"></script>2、編寫需要驗證的表單程式碼及編寫驗證程式碼(編寫驗證程式碼有兩種方式,首先使用普通方式)var validator = $("formId").validate({// #formId為需要進行驗證的表單ID   errorElement :"div",// 使用"div"標籤標記錯誤, 預設:"label"   wrapper:"li",// 使用"li"標籤再把上邊的errorELement包起來   errorClass :"validate-error",// 錯誤提示的css類名"error"   onsubmit:true,// 是否在提交是驗證,預設:true   onfocusout:true,// 是否在獲取焦點時驗證,預設:true   onkeyup :true,// 是否在敲擊鍵盤時驗證,預設:true   onclick:false,// 是否在滑鼠點選時驗證(一般驗證checkbox,radiobox)   focusCleanup:false,// 當未通過驗證的元素獲得焦點時,並移除錯誤提示       rules: {                    loginName: {// 需要進行驗證的輸入框name                        required: true// 驗證條件:必填                    },                    loginPassword: {// 需要進行驗證的輸入框name                        required: true,// 驗證條件:必填                        minlength: 5// 驗證條件:最小長度為5                    },                    email: {// 需要進行驗證的輸入框name                        required: true,// 驗證條件:必填                        email: true// 驗證條件:格式為email                    }                },                messages: {                    loginName: {                        required: "使用者名稱不允許為空!"// 驗證未通過的訊息                    },                    loginPassword: {                        required: "密碼不允許為空!",                        minlength: jQuery.format("密碼至少輸入 {0} 字元!")                    },                    email: {                        required: "email不允許為空",                        email: "郵件地址格式錯誤!"                    }                }2、使用meta String方式進行驗證,即驗證內容與寫入class中(注意meta String方式需要引入jquery.metadata.js檔案)<script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="jquery.metadata.js"></script><script type="text/javascript" src="jquery.validate.js"></script><form id="validate" action="admin/transfer!save.action" method="post"><input type="text" class="required" name="entity.name" /><input type="text" class="email" name="entity.email" /><input type="submit" class="button" value="提 交" /></form><script type="text/javascript">$(document).ready(function() {$("#formId").validate({// #formId為需要進行驗證的表單ID   meta :"validate"// 採用meta String方式進行驗證(驗證內容與寫入class中)   errorElement :"div",// 使用"div"標籤標記錯誤, 預設:"label"   wrapper:"li",// 使用"li"標籤再把上邊的errorELement包起來   errorClass :"validate-error",// 錯誤提示的css類名"error"   onsubmit:true,// 是否在提交是驗證,預設:true   onfocusout:true,// 是否在獲取焦點時驗證,預設:true   onkeyup :true,// 是否在敲擊鍵盤時驗證,預設:true   onclick:false,// 是否在滑鼠點選時驗證(一般驗證checkbox,radiobox)   focusCleanup:false,// 當未通過驗證的元素獲得焦點時,並移除錯誤提示});})</script>注意:在Struts2應用中經常用遇到name="entity.name"形式的input表單(即name中包含逗號或其它特殊符號時),我們可以將上述名稱以引號("")括起即可,如:   rules: {                    "entity.loginName": {// 需要進行驗證的輸入框name                        required: true// 驗證條件:必填                    }                },                messages: {                    "entity.loginName": {                        required: "使用者名稱不允許為空!"// 驗證未通過的訊息                    }                }可給我email:[email protected] 歡迎一起探討有關java技術的問題以上部分程式碼來源於payj開源支付系統,這個java開源專案裡面有很多優秀的Struts2 spring hibernate jquery 等框架的應用原始碼,值得一看。在這裡先推薦一下,呵呵。。。。附:內建驗證方式:required() 返回:Boolean 必填驗證元素required(dependency-expression) 返回:Boolean 必填元素依賴於表示式的結果required(dependency-callback) 返回:Boolean 必填元素依賴於回撥函式的結果remote(url) 返回:Boolean 請求遠端校驗。url通常是一個遠端呼叫方法minlength(length) 返回:Boolean 設定最小長度maxlength(length) 返回:Boolean 設定最大長度rangelength(range) 返回:Boolean 設定一個長度範圍[min,max]min(value) 返回:Boolean 設定最大值max(value) 返回:Boolean 設定最小值email() 返回:Boolean 驗證電子郵箱格式range(range) 返回:Boolean 設定值的範圍url() 返回:Boolean 驗證URL格式date() 返回:Boolean 驗證日期格式(類似30/30/2008的格式,不驗證日期準確性只驗證格式)dateISO() 返回:Boolean 驗證ISO型別的日期格式dateDE() 返回:Boolean 驗證德式的日期格式(29.04.1994 or 1.1.2006)number() 返回:Boolean 驗證十進位制數字(包括小數的)digits() 返回:Boolean 驗證整數creditcard() 返回:Boolean 驗證信用卡號accept(extension) 返回:Boolean 驗證相同字尾名的字串equalTo(other) 返回:Boolean 驗證兩個輸入框的內容是否相同phoneUS() 返回:Boolean 驗證美式的電話號碼validate ()的可選項:debug:進行除錯模式(表單不提交): $(".selector").validate({   debug:true})把除錯設定為預設: $.validator.setDefaults({   debug:true})submitHandler:通過驗證後執行的函式,裡面要加上表單提交的函式,否則表單不會提交 $(".selector").validate({   submitHandler:function(form) {$(form).ajaxSubmit();   }})ignore:對某些元素不進行驗證 $("#myform").validate({   ignore:".ignore"})rules:自定義規則,key:value的形式,key是要驗證的元素,value可以是字串或物件 $(".selector").validate({   rules:{     name:"required",     email:{       required:true,       email:true     }   }})messages:自定義的提示資訊key:value的形式key是要驗證的元素,值是字串或函式 $(".selector").validate({   rules:{     name:"required",     email:{       required:true,       email:true     }   },   messages:{     name:"Name不能為空",     email:{       required:"E-mail不能為空",       email:"E-mail地址不正確"     }   }})groups:對一組元素的驗證,用一個錯誤提示,用error Placement控制把出錯資訊放在哪裡 $("#myform").validate({groups:{    username:"fname lname"},errorPlacement:function(error,element) {     if (element.attr("name") == "fname" || element.attr("name") == "lname")       error.insertAfter("#lastname");     else       error.insertAfter(element);   },   debug:true})Onubmit Boolean 預設:true是否提交時驗證 $(".selector").validate({   onsubmit:false})onfocusout Boolean 預設:true是否在獲取焦點時驗證 $(".selector").validate({   onfocusout:false})onkeyup Boolean 預設:true是否在敲擊鍵盤時驗證 $(".selector").validate({   onkeyup:false})onclick Boolean 預設:true是否在滑鼠點選時驗證(一般驗證checkbox,radiobox) $(".selector").validate({   onclick:false})focusInvalid Boolean 預設:true提交表單後,未通過驗證的表單(第一個或提交之前獲得焦點的未通過驗證的表單)會獲得焦點 $(".selector").validate({   focusInvalid:false})focusCleanup Boolean 預設:false當未通過驗證的元素獲得焦點時,並移除錯誤提示(避免和 focusInvalid.一起使用) $(".selector").validate({   focusCleanup:true})errorClass String 預設:"error"指定錯誤提示的css類名,可以自定義錯誤提示的樣式 $(".selector").validate({   errorClass:"invalid"})errorElement String 預設:"label"使用什麼標籤標記錯誤 $(".selector").validate   errorElement:"em"})wrapper String使用什麼標籤再把上邊的errorELement包起來 $(".selector").validate({   wrapper:"li"})errorLabelContainer Selector把錯誤資訊統一放在一個容器裡面 $("#myform").validate({   errorLabelContainer:"#messageBox",   wrapper:"li",   submitHandler:function() { alert("Submitted!") }})showErrors:跟一個函式,可以顯示總共有多少個未通過驗證的元素 $(".selector").validate({   showErrors:function(errorMap,errorList) {        $("#summary").html("Your form contains " + this.numberOfInvalids() + " errors,see details below.");        this.defaultShowErrors();   }})errorPlacement:跟一個函式,可以自定義錯誤放到哪裡 $("#myform").validate({rrorPlacement:function(error,element) { error.appendTo(element.parent("td").next("td"));   },   debug:true})success:要驗證的元素通過驗證後的動作,如果跟一個字串,會當做一個css類,也可跟一個函式 $("#myform").validate({        success:"valid",        submitHandler:function() { alert("Submitted!") }})highlight:可以給未通過驗證的元素加效果,閃爍等addMethod(name,method,message)方法:引數name是新增的方法的名字引數method是一個函式,接收三個引數(value,element,param) value是元素的值,element是元素本身 param是引數,我們可以用addMethod來新增除built-in Validation methods之外的驗證方法 比如有一個欄位,只能輸一個字母,範圍是a-f,寫法如下:$.validator.addMethod("af",function(value,element,params){   if(value.length>1){    return false;   }   if(value>=params[0] && value<=params[1]){    return true;   }else{    return false;   }},"必須是一個字母,且a-f");用的時候,比如有個表單欄位的id="username",則在rules中寫username:{   af:["a","f"]}addMethod的第一個引數,就是新增的驗證方法的名子,這時是afaddMethod的第三個引數,就是自定義的錯誤提示,這裡的提示為:"必須是一個字母,且a-f"addMethod的第二個引數,是一個函式,這個比較重要,決定了用這個驗證方法時的寫法如果只有一個引數,直接寫,如果af:"a",那麼a就是這個唯一的引數,如果多個引數,用在[]裡,用逗號分開}, $.validator.format("小數位數不能超過兩位!"));});

           

給我老師的人工智慧教程打call!http://blog.csdn.net/jiangjunshow

這裡寫圖片描述