最近在使用jQuery.validate.js这个表单校验插件,由于有一些校验规则需要自己定义,查了一下,validate插件提供一个扩展方法供使用者添加自己的校验方法
jQuery.validator.addMethod( "方法名", function(value, element) {
//一些处理。。。
}, "提示信息");
背景是这样的:
扩展方法中多半是使用正则表达式的方式来处理返回一个Boolean类型的值
像这样
var expression = /一段正则表达式/;
return this.optional(element) || (expression.test(value));
那么问题来了,情况是这样的
1.需要添加多条自定义的校验方法,并且都是以上的校验形式,就是说除了方法名,表达式,提示信息之外剩下都一样,像这样
jQuery.validator.addMethod("方法1", function(value, element) {
var value = value.trim();
var expression = /正则1/;
return this.optional(element) || (expression.test(value));
}, "提示1");
jQuery.validator.addMethod("方法2", function(value, element) {
var value = value.trim();
var expression = /正则2/;
return this.optional(element) || (expression.test(value));
}, "提示2");
...依此类推方法3,4,5,6...
2.(重点在这里)我看都一样就建了个json格式的变量,是一个由方法名,正则表达式,提示文字组成的对象的数组,然后用了一个for循环,循环的调用jQuery.validator.addMethod把三个参数传进去。
3.不知道是不是我错觉呀(应该不是),貌似这个动态生成function的取向不是很对,导致貌似所有生成的都是一个校验规则的
以上,我想知道问题出在哪里了,如果能解决的话需要怎么解决,提问完毕~
最后我把我的代码放在最下面。
var proofRules = [
{
name:"isGtZeroTwoDecimal",
codex:/^(0|[1-9]\d*)(\.\d{1,2})?$/,
msg:"请输入大于0的两位小数"
},
{
name:"isAllDigit",
codex:/^[0-9]*$/,
msg:"只能输入数字"
},
{
name:"isAllLetter",
codex:/^[A-Za-z]+$/,
msg:"只能输入字母"
}
]
//添加jQuery -validate的扩展校验方法
$(function(){
for (var i in proofRules){
jQuery.validator.addMethod( proofRules[i].name, function(value, element) {
var value = value.trim();
var expression = proofRules[i].codex;
return this.optional(element) || (expression.test(value));
}, proofRules[i].msg);
}
});
循环:
helper:
至于为啥for不行,或者怎么样让for也行,这个无论是文章还是回答都在SF泛滥的不要不要的,自己找吧……
你需要理解 JS 的作用域和闭包。参见:https://segmentfault.com/a/1190000000471569
eval 。。。。。。。。。