當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jquery.validate.min.js使用介绍

發布時間：2024/3/12 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 jquery.validate.min.js使用介绍小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

jQuery?Validate

? jQuery Validate 插件為表單提供了強大的驗證功能，讓客戶端表單驗證變得更簡單，同時提供了大量的定制選項，滿足應用程序各種需求。該插件捆綁了一套有用的驗證方法，包括 URL 和電子郵件驗證，同時提供了一個用來編寫用戶自定義方法的 API。所有的捆綁方法默認使用英語作為錯誤信息，且已翻譯成其他 37 種語言。

該插件是由 J?rn Zaefferer 編寫和維護的，他是 jQuery 團隊的一名成員，是 jQuery UI 團隊的主要開發人員，是 QUnit 的維護人員。該插件在 2006 年 jQuery 早期的時候就已經開始出現，并一直更新至今。

其官網網址為：https://jqueryvalidation.org/

附最新插件下載地址：https://download.csdn.net/download/qq_23994787/10574637

使用方法

驗證規則

(1)required:true??????????????必輸字段
(2)remote:”check.PHP”?????????使用ajax方法調用check.php驗證輸入值
(3)email:true?????????????????必須輸入正確格式的電子郵件
(4)url:true???????????????????必須輸入正確格式的網址
(5)date:true??????????????????必須輸入正確格式的日期
(6)dateISO:true???????????????必須輸入正確格式的日期(ISO)，例如：2009-06-23，1998/01/22 只驗證格式，不驗證有效性
(7)number:true????????????????必須輸入合法的數字(負數，小數)
(8)digits:true????????????????必須輸入整數
(9)creditcard:????????????????必須輸入合法的信用卡號
(10)equalTo:”#field”??????????輸入值必須和#field相同
(11)accept:???????????????????輸入擁有合法后綴名的字符串（上傳文件的后綴）
(12)maxlength:5???????????????輸入長度最多是5的字符串(漢字算一個字符)
(13)minlength:10??????????????輸入長度最小是10的字符串(漢字算一個字符)
(14)rangelength:[5,10]????????輸入長度必須介于 5 和 10 之間的字符串”)(漢字算一個字符)
(15)range:[5,10]??????????????輸入值必須介于 5 和 10 之間
(16)max:5?????????????????????輸入值不能大于5
(17)min:10????????????????????輸入值不能小于10

<!DOCTYPE html> <html><head><meta charset="utf-8"><script src="js/jquery.js"></script><script src="js/jquery.validate.min.js"></script><script src="js/localization/messages_zh.js"></script><script>$.validator.setDefaults({submitHandler: function() {alert("提交事件!");}});$().ready(function() {// 在鍵盤按下并釋放及提交后驗證提交表單$("#signupForm").validate({rules: {firstname: "required",lastname: "required",username: {required: true,minlength: 2},password: {required: true,minlength: 5},confirm_password: {required: true,minlength: 5,equalTo: "#password"},email: {required: true,email: true},"topic[]": {required: "#newsletter:checked",minlength: 2},agree: "required"},messages: {firstname: "請輸入您的名字",lastname: "請輸入您的姓氏",username: {required: "請輸入用戶名",minlength: "用戶名必需由兩個字母組成"},password: {required: "請輸入密碼",minlength: "密碼長度不能小于 5 個字母"},confirm_password: {required: "請輸入密碼",minlength: "密碼長度不能小于 5 個字母",equalTo: "兩次密碼輸入不一致"},email: "請輸入一個正確的郵箱",agree: "請接受我們的聲明",topic: "請選擇兩個主題"}});});</script><style>.error {color: red; }</style> </head><body><form class="cmxform" id="signupForm" method="get" action=""><fieldset><legend>驗證完整的表單</legend><p><label for="firstname">名字</label><input id="firstname" name="firstname" type="text"></p><p><label for="lastname">姓氏</label><input id="lastname" name="lastname" type="text"></p><p><label for="username">用戶名</label><input id="username" name="username" type="text"></p><p><label for="password">密碼</label><input id="password" name="password" type="password"></p><p><label for="confirm_password">驗證密碼</label><input id="confirm_password" name="confirm_password" type="password"></p><p><label for="email">Email</label><input id="email" name="email" type="email"></p><p><label for="agree">請同意我們的聲明</label><input type="checkbox" class="checkbox" id="agree" name="agree"></p><p><label for="newsletter">我樂意接收新信息</label><input type="checkbox" class="checkbox" id="newsletter" name="newsletter"></p><fieldset id="newsletter_topics"><legend>主題 (至少選擇兩個) - 注意：如果沒有勾選“我樂意接收新信息”以下選項會隱藏，但我們這里作為演示讓它可見</legend><label for="topic_marketflash"><input type="checkbox" id="topic_marketflash" value="marketflash" name="topic[]">Marketflash</label><label for="topic_fuzz"><input type="checkbox" id="topic_fuzz" value="fuzz" name="topic[]">Latest fuzz</label><label for="topic_digester"><input type="checkbox" id="topic_digester" value="digester" name="topic[]">Mailing list digester</label><label for="topic" class="error" style="display:none">至少選擇兩個</label></fieldset><p><input class="submit" type="submit" value="提交"></p></fieldset></form> </body></html>

定義中文字段

$.extend($.validator.messages, {required: "這是必填字段",remote: "請修正此字段",email: "請輸入有效的電子郵件地址",url: "請輸入有效的網址",date: "請輸入有效的日期",dateISO: "請輸入有效的日期 (YYYY-MM-DD)",number: "請輸入有效的數字",digits: "只能輸入數字",creditcard: "請輸入有效的信用卡號碼",equalTo: "你的輸入不相同",extension: "請輸入有效的后綴",maxlength: $.validator.format("最多可以輸入 {0} 個字符"),minlength: $.validator.format("最少要輸入 {0} 個字符"),rangelength: $.validator.format("請輸入長度在 {0} 到 {1} 之間的字符串"),range: $.validator.format("請輸入范圍在 {0} 到 {1} 之間的數值"),max: $.validator.format("請輸入不大于 {0} 的數值"),min: $.validator.format("請輸入不小于 {0} 的數值") });

自定義驗證規則

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 的第一個參數,就是添加的驗證方法的名子,這時是af
addMethod 的第三個參數,就是自定義的錯誤提示,這里的提示為:”必須是一個字母,且a-f”
addMethod 的第二個參數,是一個函數,這個比較重要,決定了用這個驗證方法時的寫法
如果只有一個參數,直接寫,如果af:”a”,那么a 就是這個唯一的參數,如果多個參數,用在[]里,用逗號分開

submitHandler

//通過驗證后運行的函數, 里面要加上表單提交的函數, 否則表單不會提交 $(".selector").validate({submitHandler: function(form) {$(form).ajaxSubmit(); //用Jquery Form的函數} })

error 錯誤提示

默認情況是：error.appendTo(element.parent()); 即把錯誤信息放在驗證的元素后面 errorPlacement: function(error, element) {error.appendTo(element.parent()); } 設置錯誤提示的樣式，可以增加圖標顯示，例如： input.error {border: 1px solid red; } label.error {background: url("/demo/images/unchecked.gif") no-repeat 0px 0px;padding-left: 16px;padding-bottom: 2px;font-weight: bold;color: #EA5200; }

常用的自定義驗證規則

// 字符驗證 jQuery.validator.addMethod("stringCheck", function(value, element) {return this.optional(element) || /^[u0391-uFFE5w]+$/.test(value); }, "只能包括中文字、英文字母、數字和下劃線");// 中文字兩個字節 jQuery.validator.addMethod("byteRangeLength", 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[0] && length <= param[1]); }, "請確保輸入的值在3 - 15個字節之間(一個中文字算2個字節)");// 身份證號碼驗證 jQuery.validator.addMethod("isIdCardNo", function(value, element) {return this.optional(element) || isIdCardNo(value); }, "請正確輸入您的身份證號碼");// 手機號碼驗證 jQuery.validator.addMethod("isMobile", function(value, element) {var length = value.length;var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+d{8})$/;return this.optional(element) || (length == 11 && mobile.test(value)); }, "請正確填寫您的手機號碼");// 電話號碼驗證 jQuery.validator.addMethod("isTel", function(value, element) {var tel = /^d{3,4}-?d{7,9}$/; //電話號碼格式010-12345678return this.optional(element) || (tel.test(value)); }, "請正確填寫您的電話號碼");// 聯系電話(手機/電話皆可)驗證 jQuery.validator.addMethod("isPhone", function(value, element) {var length = value.length;var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+d{8})$/;var tel = /^d{3,4}-?d{7,9}$/;return this.optional(element) || (tel.test(value) || mobile.test(value)); }, "請正確填寫您的聯系電話");// 郵政編碼驗證 jQuery.validator.addMethod("isZipCode", function(value, element) {var tel = /^[0-9]{6}$/;return this.optional(element) || (tel.test(value)); }, "請正確填寫您的郵政編碼");function isIdCardNo(num) {var factorArr = newArray(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2, 1);var parityBit = newArray("1", "0", "X", "9", "8", "7", "6", "5", "4", "3", "2");var varArray = new Array();var intValue;var lngProduct = 0;var intCheckDigit;var intStrLen = num.length;var idNumber = num;// initializeif ((intStrLen != 15) && (intStrLen != 18)) {return false;}// check and set valuefor (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 datevar date8 = idNumber.substring(6, 14);if (isDate8(date8) == false) {return false;}// calculate the sum of the productsfor (i = 0; i < 17; i++) {lngProduct = lngProduct + varArray[i];}// calculate the check digitintCheckDigit = parityBit[lngProduct % 11];// check last digitif (varArray[17] != intCheckDigit) {return false;}} else { //length is 15//check datevar date6 = idNumber.substring(6, 12);if (isDate6(date6) == false) {return false;}}return true; }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 falseif (month < 1 || month > 12) returnfalsereturn true }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 falseif (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) iaMonthDays[1] = 29;if (month < 1 || month > 12) returnfalseif (day < 1 || day > iaMonthDays[month - 1]) return falsereturn 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("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-uFFE5w]+$/.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.validate.min.js使用介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Ubuntu下C语言程序编写与运行
下一篇： JavaWeb搭建简易个人博客