Bootstrap 与 Jquery validate 结合使用——简单实现
生活随笔
收集整理的這篇文章主要介紹了
Bootstrap 与 Jquery validate 结合使用——简单实现
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
首先必須引入的JS和CSS
<script type="text/javascript" src="${ctx}/static/js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="${ctx}/static/js/card.js"></script><script type="text/javascript" src="${ctx}/static/js/bootstrap.min.js"></script> <script type="text/javascript" src="${ctx}/static/js/bootstrap-datetimepicker.min.js"></script> <script type="text/javascript" src="${ctx}/static/js/bootstrap-datetimepicker.zh-CN.js"></script><script type="text/javascript" src="${ctx}/static/js/jquery.validate.js"></script> <script type="text/javascript" src="${ctx}/static/js/additional-methods.js"></script> <script type="text/javascript" src="${ctx}/static/js/messages_bs_zh.js"></script><link rel="stylesheet" href="${ctx}/static/css/bootstrap.css"> <link rel="stylesheet" href="${ctx}/static/css/bootstrap-datetimepicker.min.css"><link rel="stylesheet" href="${ctx}/static/css/validate.css">其中additional-methods.js是自定義的規則，messages_bs_zh.js是中文消息，validate.css是校驗信息樣式
additional-methods.js
/*!* jQuery Validation Plugin @VERSION** http://bassistance.de/jquery-plugins/jquery-plugin-validation/* http://docs.jquery.com/Plugins/Validation** Copyright (c) 2006 - 2011 J?rn Zaefferer** Dual licensed under the MIT and GPL licenses:* http://www.opensource.org/licenses/mit-license.php* http://www.gnu.org/licenses/gpl.html*/(function() {function stripHtml(value) {// remove html tags and space charsreturn value.replace(/<.[^<>]*?>/g, ' ').replace(/ | /gi, ' ')// remove punctuation.replace(/[.(),;:!?%#$'"_+=\/-]*/g,'');}jQuery.validator.addMethod("maxWords", function(value, element, params) {return this.optional(element) || stripHtml(value).match(/\b\w+\b/g).length <= params;}, jQuery.validator.format("Please enter {0} words or less."));jQuery.validator.addMethod("minWords", function(value, element, params) {return this.optional(element) || stripHtml(value).match(/\b\w+\b/g).length >= params;}, jQuery.validator.format("Please enter at least {0} words."));jQuery.validator.addMethod("rangeWords", function(value, element, params) {var valueStripped = stripHtml(value);var regex = /\b\w+\b/g;return this.optional(element) || valueStripped.match(regex).length >= params[0] && valueStripped.match(regex).length <= params[1];}, jQuery.validator.format("Please enter between {0} and {1} words."));})();//中文的驗證 jQuery.validator.addMethod("chinese", function(value, element) { var chinese = /^[\u4e00-\u9fa5]+$/; return this.optional(element) || (chinese.test(value)); }, "只能輸入中文");//字節長度驗證 jQuery.validator.addMethod("FixedLength", function(value, element, param) { var length = value.length; return this.optional(element) || (length == param); }, $.validator.format("請輸入長度為{0}的字符串"));//比較大小 jQuery.validator.addMethod("compareSize", function(value, element, param) { var sta = parseInt($(param).val()); var stat = $(param).closest("td").prev().text();var curt = $(this).closest("td").prev().text();return this.optional(element) || (parseInt(value)>=sta); }, $.validator.format("前面的值不能大于后面"));//價格精度 jQuery.validator.addMethod("Price", function(value, element, param) { var precision = 0;var precisions = value.split("."); if(precisions.length>1)precision = precisions[0].length;elseprecision = value.length;return this.optional(element) || (precision <= param); }, $.validator.format("輸入的數值過大！"));//日期比較 jQuery.validator.addMethod("compareDate",function(value, element,param) {var startDate = $(param).val();return new Date(Date.parse(startDate.replace("-", "/"))) <= new Date(Date.parse(value.replace("-", "/")));},"結束日期必須大于開始日期!");//開始日期和結束日期不能超過一年 jQuery.validator.addMethod("compareYear",function(value, element,param) {var startDate = $(param).val();var year = startDate.substring(0,4);var newyear = parseInt(year)+1;var newDate=newyear+startDate.substring(4,startDate.length);return new Date(Date.parse(newDate.replace("-", "/"))) >= new Date(Date.parse(value.replace("-", "/")));},"開始日期和結束日期不能超過一年!");//驗證卡長度 jQuery.validator.addMethod("cardlength", function (value, element) {var length = value.length;return this.optional(element) || (length == 19); }, "卡號長度驗證失敗");//驗證密碼 jQuery.validator.addMethod("passwd", function (value, element) {if(passwordLevel(value)==1){return false;}return true; }, "請輸入正確的密碼格式！");//身份證號碼驗證 jQuery.validator.addMethod("isIdCardNo", function(value, element) { return this.optional(element) || idCardNoUtil.checkIdCardNo(value); }, "請正確輸入您的身份證號碼"); //護照編號驗證jQuery.validator.addMethod("passport", function(value, element) { return this.optional(element) || checknumber(value); }, "請正確輸入您的護照編號"); //電話號碼驗證 jQuery.validator.addMethod("telmob", function (value, element) {var length = value.length;var mobile = /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/;return this.optional(element) || (length == 11 && mobile.test(value)); }, "電話號碼格式錯誤");//聯系電話(手機/電話皆可)驗證 jQuery.validator.addMethod("isPhone", 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)); }, "請正確填寫您的聯系方式"); //傳真 jQuery.validator.addMethod("fax", function (value, element) {var length = value.length;var mobile = /^\d{3,4}-\d{7,8}$/;return this.optional(element) || (mobile.test(value)); }, "傳真號碼錯誤");//驗證碼校驗 jQuery.validator.addMethod("checkVerifyCode", function (value, element) {var verifyCode = value;var res =false;$.ajax({type:"POST",async:false, url:"/default/index/ajax/do/ajaxcheckuser",data:"verifyCode="+verifyCode,success:function(response){if(response){res = false;}else{res = true;}}});return res; }, "驗證碼不正確");//手機號碼驗證 jQuery.validator.addMethod("mobile", function (value, element) {var length = value.length;var mobile = /^((13[0-9])|(15[^4,\\D])|(18[0-9])|(17[0-9]))+\d{8}$/;return this.optional(element) || (length == 11 && mobile.test(value)); }, "手機號碼格式錯誤"); //郵政編碼 jQuery.validator.addMethod("isZipCode", function (value, element) {var tel = /^[0-9]{6}$/;return this.optional(element) || (tel.test(value)); }, "請正確填寫您的郵政編碼"); // QQ號碼驗證 jQuery.validator.addMethod("qq", function (value, element) {var tel = /^[1-9]\d{4,9}$/;return this.optional(element) || (tel.test(value)); }, "qq號碼格式錯誤"); //中文字兩個字節 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] ); }, $.validator.format("請確保輸入的值在{0}-{1}個字節之間(一個中文字算2個字節)")); jQuery.validator.addMethod("letterswithbasicpunc", function(value, element) {return this.optional(element) || /^[a-z\-.,()'\"\s]+$/i.test(value); }, "Letters or punctuation only please");jQuery.validator.addMethod("alphanumeric", function(value, element) {return this.optional(element) || /^\w+$/i.test(value); }, "Letters, numbers, and underscores only please");jQuery.validator.addMethod("lettersonly", function(value, element) {return this.optional(element) || /^[a-z]+$/i.test(value); }, "Letters only please");jQuery.validator.addMethod("nowhitespace", function(value, element) {return this.optional(element) || /^\S+$/i.test(value); }, "No white space please");jQuery.validator.addMethod("ziprange", function(value, element) {return this.optional(element) || /^90[2-5]\d\{2\}-\d{4}$/.test(value); }, "Your ZIP-code must be in the range 902xx-xxxx to 905-xx-xxxx");jQuery.validator.addMethod("zipcodeUS", function(value, element) {return this.optional(element) || /\d{5}-\d{4}$|^\d{5}$/.test(value) }, "The specified US ZIP Code is invalid");jQuery.validator.addMethod("integer", function(value, element) {return this.optional(element) || /^-?\d+$/.test(value); }, "A positive or negative non-decimal number please");/*** Return true, if the value is a valid vehicle identification number (VIN).** Works with all kind of text inputs.** @example <input type="text" size="20" name="VehicleID" class="{required:true,vinUS:true}" />* @desc Declares a required input element whose value must be a valid vehicle identification number.** @name jQuery.validator.methods.vinUS* @type Boolean* @cat Plugins/Validate/Methods*/ jQuery.validator.addMethod("vinUS", function(v) {if (v.length != 17) {return false;}var i, n, d, f, cd, cdv;var LL = ["A","B","C","D","E","F","G","H","J","K","L","M","N","P","R","S","T","U","V","W","X","Y","Z"];var VL = [1,2,3,4,5,6,7,8,1,2,3,4,5,7,9,2,3,4,5,6,7,8,9];var FL = [8,7,6,5,4,3,2,10,0,9,8,7,6,5,4,3,2];var rs = 0;for(i = 0; i < 17; i++){f = FL[i];d = v.slice(i,i+1);if (i == 8) {cdv = d;}if (!isNaN(d)) {d *= f;} else {for (n = 0; n < LL.length; n++) {if (d.toUpperCase() === LL[n]) {d = VL[n];d *= f;if (isNaN(cdv) && n == 8) {cdv = LL[n];}break;}}}rs += d;}cd = rs % 11;if (cd == 10) {cd = "X";}if (cd == cdv) {return true;}return false; }, "The specified vehicle identification number (VIN) is invalid.");/*** Return true, if the value is a valid date, also making this formal check dd/mm/yyyy.** @example jQuery.validator.methods.date("01/01/1900")* @result true** @example jQuery.validator.methods.date("01/13/1990")* @result false** @example jQuery.validator.methods.date("01.01.1900")* @result false** @example <input name="pippo" class="{dateITA:true}" />* @desc Declares an optional input element whose value must be a valid date.** @name jQuery.validator.methods.dateITA* @type Boolean* @cat Plugins/Validate/Methods*/ jQuery.validator.addMethod("dateITA", function(value, element) {var check = false;var re = /^\d{1,2}\/\d{1,2}\/\d{4}$/;if( re.test(value)){var adata = value.split('/');var gg = parseInt(adata[0],10);var mm = parseInt(adata[1],10);var aaaa = parseInt(adata[2],10);var xdata = new Date(aaaa,mm-1,gg);if ( ( xdata.getFullYear() == aaaa ) && ( xdata.getMonth () == mm - 1 ) && ( xdata.getDate() == gg ) )check = true;elsecheck = false;} elsecheck = false;return this.optional(element) || check; }, "Please enter a correct date");jQuery.validator.addMethod("dateNL", function(value, element) {return this.optional(element) || /^\d\d?[\.\/-]\d\d?[\.\/-]\d\d\d?\d?$/.test(value); }, "Vul hier een geldige datum in.");jQuery.validator.addMethod("time", function(value, element) {return this.optional(element) || /^([0-1][0-9]|2[0-3]):([0-5][0-9])$/.test(value); }, "Please enter a valid time, between 00:00 and 23:59"); jQuery.validator.addMethod("time12h", function(value, element) {return this.optional(element) || /^((0?[1-9]|1[012])(:[0-5]\d){0,2}(\ [AP]M))$/i.test(value); }, "Please enter a valid time, between 00:00 am and 12:00 pm");/*** matches US phone number format** where the area code may not start with 1 and the prefix may not start with 1* allows '-' or ' ' as a separator and allows parens around area code* some people may want to put a '1' in front of their number** 1(212)-999-2345* or* 212 999 2344* or* 212-999-0983** but not* 111-123-5434* and not* 212 123 4567*/ jQuery.validator.addMethod("phoneUS", function(phone_number, element) {phone_number = phone_number.replace(/\s+/g, "");return this.optional(element) || phone_number.length > 9 &&phone_number.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/); }, "Please specify a valid phone number");jQuery.validator.addMethod('phoneUK', function(phone_number, element) {phone_number = phone_number.replace(/\s+|-/g,'');return this.optional(element) || phone_number.length > 9 &&phone_number.match(/^(\(?(0|\+44)[1-9]{1}\d{1,4}?\)?\s?\d{3,4}\s?\d{3,4})$/); }, 'Please specify a valid phone number');jQuery.validator.addMethod('mobileUK', function(phone_number, element) {phone_number = phone_number.replace(/\s+|-/g,'');return this.optional(element) || phone_number.length > 9 &&phone_number.match(/^((0|\+44)7(0|4|5|6|7|8|9){1}\d{2}\s?\d{6})$/); }, 'Please specify a valid mobile number');//Matches UK landline + mobile, accepting only 01-3 for landline or 07 for mobile to exclude many premium numbers jQuery.validator.addMethod('phonesUK', function(phone_number, element) {phone_number = phone_number.replace(/\s+|-/g,'');return this.optional(element) || phone_number.length > 9 &&phone_number.match(/^(0[1-3]{1}[0-9]{8,9})$/) || phone_number.match(/^(07[5-9]{1}[0-9]{7,8})$/); }, 'Please specify a valid uk phone number');//Matches UK postcode. based on http://snipplr.com/view/3152/postcode-validation/ jQuery.validator.addMethod('postcodeUK', function(postcode, element) {postcode = (postcode.toUpperCase()).replace(/\s+/g,'');return this.optional(element) || postcode.match(/^([^QZ]{1}[^IJZ]{0,1}[0-9]{1,2})([0-9]{1}[^CIKMOV]{2})$/) || postcode.match(/^([^QV]{1}[0-9]{1}[ABCDEFGHJKSTUW]{1})([0-9]{1}[^CIKMOV]{2})$/) || postcode.match(/^([^QV]{1}[^IJZ][0-9]{1}[ABEHMNPRVWXY])([0-9]{1}[^CIKMOV]{2})$/) || postcode.match(/^(GIR)(0AA)$/) || postcode.match(/^(BFPO)([0-9]{1,4})$/) || postcode.match(/^(BFPO)(C\/O[0-9]{1,3})$/); }, 'Please specify a valid postcode');// TODO check if value starts with <, otherwise don't try stripping anything jQuery.validator.addMethod("strippedminlength", function(value, element, param) {return jQuery(value).text().length >= param; }, jQuery.validator.format("Please enter at least {0} characters"));// same as email, but TLD is optional jQuery.validator.addMethod("email2", function(value, element, param) {return this.optional(element) || /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)*(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i.test(value); }, jQuery.validator.messages.email);// same as url, but TLD is optional jQuery.validator.addMethod("url2", function(value, element, param) {return this.optional(element) || /^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)*(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(value); }, jQuery.validator.messages.url);// NOTICE: Modified version of Castle.Components.Validator.CreditCardValidator // Redistributed under the the Apache License 2.0 at http://www.apache.org/licenses/LICENSE-2.0 // Valid Types: mastercard, visa, amex, dinersclub, enroute, discover, jcb, unknown, all (overrides all other settings) jQuery.validator.addMethod("creditcardtypes", function(value, element, param) {if (/[^0-9-]+/.test(value)) {return false;}value = value.replace(/\D/g, "");var validTypes = 0x0000;if (param.mastercard)validTypes |= 0x0001;if (param.visa)validTypes |= 0x0002;if (param.amex)validTypes |= 0x0004;if (param.dinersclub)validTypes |= 0x0008;if (param.enroute)validTypes |= 0x0010;if (param.discover)validTypes |= 0x0020;if (param.jcb)validTypes |= 0x0040;if (param.unknown)validTypes |= 0x0080;if (param.all)validTypes = 0x0001 | 0x0002 | 0x0004 | 0x0008 | 0x0010 | 0x0020 | 0x0040 | 0x0080;if (validTypes & 0x0001 && /^(51|52|53|54|55)/.test(value)) { //mastercardreturn value.length == 16;}if (validTypes & 0x0002 && /^(4)/.test(value)) { //visareturn value.length == 16;}if (validTypes & 0x0004 && /^(34|37)/.test(value)) { //amexreturn value.length == 15;}if (validTypes & 0x0008 && /^(300|301|302|303|304|305|36|38)/.test(value)) { //dinersclubreturn value.length == 14;}if (validTypes & 0x0010 && /^(2014|2149)/.test(value)) { //enroutereturn value.length == 15;}if (validTypes & 0x0020 && /^(6011)/.test(value)) { //discoverreturn value.length == 16;}if (validTypes & 0x0040 && /^(3)/.test(value)) { //jcbreturn value.length == 16;}if (validTypes & 0x0040 && /^(2131|1800)/.test(value)) { //jcbreturn value.length == 15;}if (validTypes & 0x0080) { //unknownreturn true;}return false; }, "Please enter a valid credit card number.");jQuery.validator.addMethod("ipv4", function(value, element, param) {return this.optional(element) || /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/i.test(value); }, "Please enter a valid IP v4 address.");jQuery.validator.addMethod("ipv6", function(value, element, param) {return this.optional(element) || /^((([0-9A-Fa-f]{1,4}:){7}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){6}:[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){5}:([0-9A-Fa-f]{1,4}:)?[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){4}:([0-9A-Fa-f]{1,4}:){0,2}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){3}:([0-9A-Fa-f]{1,4}:){0,3}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){2}:([0-9A-Fa-f]{1,4}:){0,4}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){6}((\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b)\.){3}(\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b))|(([0-9A-Fa-f]{1,4}:){0,5}:((\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b)\.){3}(\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b))|(::([0-9A-Fa-f]{1,4}:){0,5}((\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b)\.){3}(\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b))|([0-9A-Fa-f]{1,4}::([0-9A-Fa-f]{1,4}:){0,5}[0-9A-Fa-f]{1,4})|(::([0-9A-Fa-f]{1,4}:){0,6}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){1,7}:))$/i.test(value); }, "Please enter a valid IP v6 address.");/** * Return true if the field value matches the given format RegExp * * @example jQuery.validator.methods.pattern("AR1004",element,/^AR\d{4}$/) * @result true * * @example jQuery.validator.methods.pattern("BR1004",element,/^AR\d{4}$/) * @result false * * @name jQuery.validator.methods.pattern * @type Boolean * @cat Plugins/Validate/Methods */ jQuery.validator.addMethod("pattern", function(value, element, param) {if (this.optional(element)) {return true;}if (typeof param === 'string') {param = new RegExp('^(?:' + param + ')$');}return param.test(value); }, "Invalid format.");/** Lets you say "at least X inputs that match selector Y must be filled."** The end result is that neither of these inputs:** <input class="productinfo" name="partnumber">* <input class="productinfo" name="description">** ...will validate unless at least one of them is filled.** partnumber: {require_from_group: [1,".productinfo"]},* description: {require_from_group: [1,".productinfo"]}**/ jQuery.validator.addMethod("require_from_group", function(value, element, options) {var validator = this;var selector = options[1];var validOrNot = $(selector, element.form).filter(function() {return validator.elementValue(this);}).length >= options[0];if(!$(element).data('being_validated')) {var fields = $(selector, element.form);fields.data('being_validated', true);fields.valid();fields.data('being_validated', false);}return validOrNot; }, jQuery.format("Please fill at least {0} of these fields."));/** Lets you say "either at least X inputs that match selector Y must be filled,* OR they must all be skipped (left blank)."** The end result, is that none of these inputs:** <input class="productinfo" name="partnumber">* <input class="productinfo" name="description">* <input class="productinfo" name="color">** ...will validate unless either at least two of them are filled,* OR none of them are.** partnumber: {skip_or_fill_minimum: [2,".productinfo"]},* description: {skip_or_fill_minimum: [2,".productinfo"]},* color: {skip_or_fill_minimum: [2,".productinfo"]}**/ jQuery.validator.addMethod("skip_or_fill_minimum", function(value, element, options) {var validator = this;numberRequired = options[0];selector = options[1];var numberFilled = $(selector, element.form).filter(function() {return validator.elementValue(this);}).length;var valid = numberFilled >= numberRequired || numberFilled === 0;if(!$(element).data('being_validated')) {var fields = $(selector, element.form);fields.data('being_validated', true);fields.valid();fields.data('being_validated', false);}return valid; }, jQuery.format("Please either skip these fields or fill at least {0} of them."));// Accept a value from a file input based on a required mimetype jQuery.validator.addMethod("accept", function(value, element, param) {// Split mime on commas incase we have multiple types we can acceptvar typeParam = typeof param === "string" ? param.replace(/,/g, '|') : "image/*",optionalValue = this.optional(element),i, file;// Element is optionalif(optionalValue) {return optionalValue;}if($(element).attr("type") === "file") {// If we are using a wildcard, make it regex friendlytypeParam = typeParam.replace("*", ".*");// Check if the element has a FileList before checking each fileif(element.files && element.files.length) {for(i = 0; i < element.files.length; i++) {file = element.files[i];// Grab the mimtype from the loaded file, verify it matchesif(!file.type.match(new RegExp( ".?(" + typeParam + ")$", "i"))) {return false;}}}}// Either return true because we've validated each file, or because the// browser does not support element.files and the FileList featurereturn true; }, jQuery.format("Please enter a value with a valid mimetype."));// Older "accept" file extension method. Old docs: http://docs.jquery.com/Plugins/Validation/Methods/accept jQuery.validator.addMethod("extension", function(value, element, param) {param = typeof param === "string" ? param.replace(/,/g, '|') : "png|jpe?g|gif";return this.optional(element) || value.match(new RegExp(".(" + param + ")$", "i")); }, jQuery.format("Please enter a value with a valid extension."));messages_bs_zh.js
/** Translated default messages for the jQuery validation plugin.* Locale: ZH (Chinese, 中文 (Zhōngwén), 漢語, 漢語)*/ jQuery.extend(jQuery.validator.messages, {required: "必填字段",remote: "請修正該字段",email: "請輸入正確格式的電子郵件",url: "請輸入合法的網址",date: "請輸入合法的日期",dateISO: "請輸入合法的日期 (ISO)(YYYY-MM-DD)",number: "請輸入合法的數字",digits: "只能輸入整數",creditcard: "請輸入合法的信用卡號",equalTo: "請再次輸入相同的值",accept: "請輸入擁有合法后綴名的字符串",maxlength: jQuery.validator.format("請輸入一個長度最多是 {0} 的字符串"),minlength: jQuery.validator.format("請輸入一個長度最少是 {0} 的字符串"),rangelength: jQuery.validator.format("請輸入一個長度介于 {0} 和 {1} 之間的字符串"),range: jQuery.validator.format("請輸入一個介于 {0} 和 {1} 之間的值"),max: jQuery.validator.format("請輸入一個最大為 {0} 的值"),min: jQuery.validator.format("請輸入一個最小為 {0} 的值") });validate.css
span.form-control-feedback{?? ?margin-top: 10px;
}
span.help-block{
?? ?margin: 15px 5px;
}
.bank-card-div span.form-control-feedback{
?? ?margin-right: 40px;
}
.verify-code-div span.form-control-feedback{
?? ?margin-right: 95.6px;
}
.exp-date-div span.form-control-feedback{
?? ?margin-right: 39.2px;
}
頁面調用Jquery-validate
$(function(){//表單數據校驗var validate = $("#userPay").validate({errorElement : 'span',errorClass : 'help-block',debug: false, //調試模式取消submit的默認提交功能 focusInvalid: false, //當為false時，驗證無效時，沒有焦點響應 submitHandler: function(form){ //表單提交句柄,為一回調函數，帶一個參數：form alert("提交表單"); form.submit(); //提交表單 }, rules:{name:{required : true,minlength : 2},idCard:{required : true,isIdCardNo : true},phone:{required : true,mobile : true},cvn:{required : true,FixedLength : 3,},cardNo:{required : true,FixedLength : 16},verifyCode:{required : true,FixedLength : 4,checkVerifyCode : true},expDate:{required:true,date : true} },messages:{name:{required : "請輸入姓名",minlength : "請輸入正確的姓名"},idCard:{required : "請輸入身份證號"},phone:{required : "請輸入手機號碼"},cardNo:{required :"請輸入銀行信用卡",cardlength : "請輸入正確的銀行信用卡"},cvn:{required : "請輸入CVN",FixedLength : "請輸入3位的CVN"},verifyCode:{required : "請輸入驗證碼",FixedLength : "請輸入有效的驗證碼",},expDate:{required : "請輸入有效日期"}},//自定義錯誤消息放到哪里errorPlacement : function(error, element) {//區分普通輸入框和輸入框組，如果直接用element.next().remove();會錯誤刪除標簽（即輸入框組的<span class="input-group-addon"></span>）element.nextUntil(".input-group-addon").remove();//element.next().remove();//刪除顯示圖標element.after('<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>');element.closest('.form-group').append(error);//顯示錯誤消息提示 },//給未通過驗證的元素進行處理highlight : function(element) {$(element).closest('.form-group').addClass('has-error has-feedback');},//驗證通過的處理success : function(label) {var el=label.closest('.form-group').find("input");//區分普通輸入框和輸入框組，如果直接用el.next().remove();會錯誤刪除標簽（即輸入框組的<span class="input-group-addon"></span>）el.nextUntil(".input-group-addon").remove();//el.next().remove();//刪除顯示圖標 el.after('<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>');label.closest('.form-group').removeClass('has-error').addClass("has-feedback has-success");label.remove();},}); });html頁面
<form id="userPay" action="" method="post" ><table><tr><td><div class="form-group"><label for="dtp_input3" class="label-title control-label">姓名：</label><div class="input-group input-div"><input id="name" name="name" required class="form-control readonly-input" size="16" type="text" value=""></div></div></td><td class="float-td"><div class="form-group"><label for="dtp_input3" class="label-title control-label">身份證：</label><div class="input-group input-div"><input id="idCard" name="idCard" class="form-control readonly-input" size="16" type="text" value=""></div></div></td></tr><tr><td><div class="form-group"><label for="dtp_input3" class="label-title control-label">手機：</label><div class="input-group input-div"><input id="phone" name="phone" class="form-control readonly-input" size="16" type="text" value=""></div></div></td></tr><tr><td><div class="form-group bank-card-div"><label for="dtp_input3" class="label-title control-label">銀行卡：</label><div class="input-group date input-div"><input id="cardNo" name="cardNo" class="form-control" data-toggle="dropdown" size="16" type="text" value=""/><input id="copy-cardNo" type="hidden" value=""/><span class="input-group-addon" data-toggle="dropdown"><span class="glyphicon glyphicon-transfer"></span></span><ul id="userCards" class="dropdown-menu"><!-- <li><span>信用卡（7757）</span><a href="#">刪除</a></li><li><span οnclick="javascript: changeCard(this);">信用卡（7757）</span><a href="#" οnclick= "return confirm('是否確定');">刪除</a></li><li><span οnclick="javascript: changeCard(this);">信用卡（7757）</span><a href="#" οnclick= "return confirm('是否確定');">刪除</a></li><li><span οnclick="javascript: changeCard(this);">信用卡（7757）</span><a href="#" οnclick= "return confirm('是否確定');">刪除</a></li> --></ul></div></div></td><td class="float-td"><div class="form-group"><label for="dtp_input3" class="label-title control-label">CVN：</label><div class="input-group input-div"><input id="cvn" name="cvn" class="form-control" size="3" type="text" value=""></div></div></td></tr><tr><td><div class="form-group verify-code-div"><label for="dtp_input3" class="label-title control-label">驗證碼：</label><div class="input-group input-div"><input id="verifyCode" name="verifyCode" class="form-control" data-toggle="dropdown" size="16" type="text" value=""><span class="input-group-addon verify-code-span"><button id="verify-code" class="btn btn-primary verify-code-button" data-loading-text="已發送" type="button">發送驗證碼</button></span></span></div></div></td><td class="float-td"><div class="form-group exp-date-div"><label for="dtp_input2" class="label-title control-label">有效期：</label><div class="datepicker input-group date form_date input-div"><input id="expDate" name="expDate" class="form-control" data-toggle="dropdown" size="16" type="text" value="" readonly><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span></div></div></td></tr></table><input id="submit-btn" class="btn btn-primary submit-button" data-loading-text="正在提交" type="submit" value="確認支付"/> </form>?如果
轉載于:https://www.cnblogs.com/onlymate/p/6673147.html
總結
以上是生活随笔為你收集整理的Bootstrap 与 Jquery validate 结合使用——简单实现的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 实际工程里的长宽设定
- 下一篇： 仿微信公众平台“打标签”功能~~~