welcome to xlongwei.com

欢迎大家一起学习、交流、分享


QQ:9167702333 邮箱:admin@xlongwei.com

jquery.validate.js的扩展及bug修复


分类 Java   关键字 分享   标签 web,jquery   发布 hongwei  1442477964313
注意 转载须保留原文链接,译文链接,作者译者等信息。  
笔者在使用jquery.validate.js的remote规则校验时遇上了一些bug,在firefox不断卡死的条件下终于调试修复了这些bug,并利用正则表达式扩展了一些常用的校验规则,更复杂更准确的校验还是得使用remote调用远程接口(比如身份证号、银行卡号等有校验位的值校验)。

修改remote相关bug后的代码,原代码在双斜杠//后面
//jQuery validation plug-in 1.7
if ( previous.old !== value ) {
previous.old = value;
var validator = this;
this.startRequest(element);
var data = {};
data[element.name] = value;
$.ajax($.extend(true, {
url: param.url || param, //url: param
mode: "abort",
port: "validate" + element.name,
dataType: "json",
data: param.data || data, //data: data, 支持自定义提交参数
success: function(response) {
validator.settings.messages[element.name].remote = previous.originalMessage;
if(response.valid) response=response.valid; //扩展,支持xlongwei.com提供的接口,返回内容{valid:true|false}
var valid = response === true || response === "true"; //支持 remote: "url" 时,接口直接返回true|false
if ( valid ) {
var submitted = validator.formSubmitted;
validator.prepareElement(element);
validator.formSubmitted = submitted;
validator.successList.push(element);
validator.showErrors();
} else {
var errors = {};//这个bug找的最久,现象就是remote相应的错误提示文字不能显示,response已经是false了
//var message = (previous.message = response || validator.defaultMessage( element, "remote" ));
  var message = (previous.message || validator.defaultMessage( element, "remote" ));
errors[element.name] = $.isFunction(message) ? message(value) : message;
validator.showErrors(errors);
}
previous.valid = valid;
validator.stopRequest(element, valid);
}
}, param));
return "pending";
}

简单的扩展,添加message,添加rule正则处理
min: $.validator.format("Please enter a value greater than or equal to {0}."),
//接着上文min规则,继续添加:money金额 chinese汉字 mobile手机号 tel电话号 ip地址 plateNumber车牌号 idNumber身份证号(仅检查数字个数)bankCardNumber银行卡号
money: "Please enter a valid money number.",
chinese: "Please enter a valid chinese string.",
mobile: "Please enter a valid mobile number.",
tel: "Please enter a valid telephone number.",
ip: "Please enter a valid ip address.",
plateNumber: "Please enter a valid plate number.",
idNumber: "Please enter a valid identity number.",
bankCardNumber: "Please enter a valid bank card number.",
pattern: "Please enter a valid pattern string."

//添加规则校验算法
equalTo: function(value, element, param) {
// bind to the blur event of the target in order to revalidate whenever the target field is updated
// TODO find a way to bind the event just once, avoiding the unbind-rebind overhead
var target = $(param).unbind(".validate-equalTo").bind("blur.validate-equalTo", function() {
$(element).valid();
});
return value == target.val();
},
//接着上文equalTo继续添加,上面有个逗号分隔,/^regex&/保证完全匹配
money: function(value, element) {
return this.optional(element) || /^-?(?:\d+)(?:\.\d{1,2})?$/.test(value);
},
chinese: function(value, element) {
return this.optional(element) || /^[\u4e00-\u9fa5]+$/.test(value);
},
mobile: function(value, element) {
return this.optional(element) || /^[1]((3[456789])|(5[012789])|(8[78]))[0-9]{8}$/.test(value);
},
tel: function(value, element) {
return this.optional(element) || /^(\d{3,4}-?)?\d{7,8}$/.test(value);
},
ip: function(value, element) {
return this.optional(element) || /^((\d|[1-9]\d|[1]\d{2}|[2][0-4]\d|[2][5][0-5])\.){3}(\d|[1-9]\d|[1]\d{2}|[2][0-4]\d|[2][5][0-5])$/.test(value);
},
plateNumber: function(value, element) {
return this.optional(element) || /^([\u4E00-\u9FA5][a-zA-Z]-?[a-zA-Z0-9]{5})|(WJ\d{2}-?(\d{5}|[\u4E00-\u9FA5]\d{4}))$/.test(value);
},
idNumber: function(value, element) {
return this.optional(element) || /^\d{14}\d{3}?[0-9xX]$/.test(value);
},
bankCardNumber: function(value, element) {
return this.optional(element) || /^(\d{16}|\d{19})$/.test(value);
},
pattern: function(value, element, param) {
return this.optional(element) || new RegExp("^"+param+"$").test(value);
},

//添加中文提示消息
min: jQuery.validator.format("不能小于{0}"),
//中文messages,接着上文继续添加
money: "金额不正确",
chinese: "只能输入汉字",
mobile: "手机号不正确",
tel: "电话号码不正确",
ip: "ip地址不正确",
plateNumber: "车牌号不正确",
idNumber: "身份证号不正确",
bankCardNumber: "银行卡号不正确",
pattern: "格式不匹配"

//使用,全部提供true值校验即可
	$("form").validate({
rules:{
money: {money: true}, //前面的money是字段名,后面的是规则名,两者可以不同
idnumber: {idNumber: true},
bankcard: {bankCardNumber: true}
},
messages: {
money: "钱输错了",
idnumber: "身份证号不对"
}
});