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 chars
return 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;
else
precision = 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;
else
check = false;
} else
check = 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)) { //mastercard
return value.length == 16;
}
if (validTypes & 0x0002 && /^(4)/.test(value)) { //visa
return value.length == 16;
}
if (validTypes & 0x0004 && /^(34|37)/.test(value)) { //amex
return value.length == 15;
}
if (validTypes & 0x0008 && /^(300|301|302|303|304|305|36|38)/.test(value)) { //dinersclub
return value.length == 14;
}
if (validTypes & 0x0010 && /^(2014|2149)/.test(value)) { //enroute
return value.length == 15;
}
if (validTypes & 0x0020 && /^(6011)/.test(value)) { //discover
return value.length == 16;
}
if (validTypes & 0x0040 && /^(3)/.test(value)) { //jcb
return value.length == 16;
}
if (validTypes & 0x0040 && /^(2131|1800)/.test(value)) { //jcb
return value.length == 15;
}
if (validTypes & 0x0080) { //unknown
return 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 accept
var typeParam = typeof param === "string" ? param.replace(/,/g, '|') : "image/*",
optionalValue = this.optional(element),
i, file;
// Element is optional
if(optionalValue) {
return optionalValue;
}
if($(element).attr("type") === "file") {
// If we are using a wildcard, make it regex friendly
typeParam = typeParam.replace("*", ".*");
// Check if the element has a FileList before checking each file
if(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 matches
if(!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 feature
return 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 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 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 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 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 name="cardNo" class="form-control" data-toggle="dropdown" size="16" type="text" value=""/>
<input type="hidden" value=""/>
<span class="input-group-addon" data-toggle="dropdown"><span class="glyphicon glyphicon-transfer"></span></span>
<ul class="dropdown-menu">
<!-- <li><span>信用卡（7757）</span><a href="#">删除</a></li>
<li><span onclick="javascript: changeCard(this);">信用卡（7757）</span><a href="#" onclick= "return confirm('是否确定');">删除</a></li>
<li><span onclick="javascript: changeCard(this);">信用卡（7757）</span><a href="#" onclick= "return confirm('是否确定');">删除</a></li>
<li><span onclick="javascript: changeCard(this);">信用卡（7757）</span><a href="#" onclick= "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 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 name="verifyCode" class="form-control" data-toggle="dropdown" size="16" type="text" value="">
<span class="input-group-addon verify-code-span"><button 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 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 class="btn btn-primary submit-button" data-loading-text="正在提交" type="submit" value="确认支付"/>
</form>如果
