怎么自定义一个javascript验证框架

tangjin

作者

怎么自定义一个javascript验证框架？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

1. 验证框架主要采用 jquery异步对象去扩展的，也就是jquery defered 的用法，这样去做验证的好处是，即使某些验证是采用ajax 方式去验证的，结合jquery when 函数，一样可以批量校验. 主要代码如下:

functionValidator(errorHandle){
this.errorHandle=errorHandle;
this.elements=["input","select","textarea"];
}
Validator.prototype={
contructor:Validator,
rules:{},
addRules:function(ruleName,validFunction,errorFunction){
this.rules[ruleName]={
validFunction:validFunction,
errorFunction:errorFunction
};
},
eventFunction:function(item){
varself=this;
$(item).die().live("blur",function(){
self.validateItem(item);
});
},
bindingEvent:function(divId){
varself=this;
self.elements.forEach(function(element){
$("#"+divId).find(element).each(function(i,item){
self.eventFunction(item);
});
});
},
validateDiv:function(divId){
vardtdList=[],
self=this;
self.elements.forEach(function(element){
$("#"+divId).find(element).each(function(i,item){
dtdList.push(self.validateItem(item));
});
});
self.elements.forEach(function(element){
if($("#"+divId).find(element).length==0){
vardeferred=$.Deferred();
deferred.resolve();
dtdList.push(deferred);
}
});
return$.when.apply(null,dtdList).fail(function(){
if(self.errorHandle){
self.errorHandle.call(null,divId);
}
});
},
validateItem:function(d){
varself=this;
varruleList=[];
for(varrinthis.rules){
if($(d).is("["+r+"]")){
ruleList.push(r);
}
}
vardtd=$.Deferred();
varchecked=function(){
if(ruleList.length>=1){
varok=self.validate(d,ruleList[0]);
ok.done(function(){
if(ruleList.length>=2){
self.validate(d,ruleList[1]);
}
ruleList.shift();
checked();
}).fail(function(){
dtd.reject();
});
}else{
dtd.resolve();
};
//dtd.resolve();
//returndtd;
};
checked();
returndtd;
},
validate:function(d,rule){
varvalue=$(d).val(),
attributeValue=$(d).attr(rule),
f=this.rules[rule].validFunction,
self=this;
varok=f.call(null,d,value,attributeValue);
returnok.fail(function(item){
if($(item).siblings("[validationError]").length!=0){
$(item).siblings("[validationError]").remove();
}
if(self.rules[rule].errorFunction){
self.rules[rule].errorFunction(d,rule);
}else{
self.showErrorMessage(d,rule);
}
}).done(function(item){
if($(item).siblings("[validationError]").length!=0){
$(item).siblings("[validationError]").remove();
}
});
},
validationByRegx:function(d,value,regx){
vardtd=$.Deferred(),
ok=regx.test(value);
if(ok||$.trim(value)===""){
dtd.resolve(d);
}else{
dtd.reject(d);
}
returndtd.promise();
},
/*默认的出错处理方法*/
showErrorMessage:function(item,rule){
varmsgInfo=getJSLocale($(item).attr("msgid"));
varruleInfo=getJSLocale("msg_"+rule);
if($(item).siblings("span").find("[msgid='msg_"+rule+"']").length==0){
varmessage=msgInfo||ruleInfo;
$(item).parent().append("<spanvalidationError><labelmsgid='msg_"+rule+"'>"+message+"</label></span>");
}
}
};
//adddefaultrule
Validator.prototype.addRules("required",function(d,value,attributeValue){
vardtd=$.Deferred();
varok=!($.trim(value)==""||value==null);
if(ok){
dtd.resolve(d);
}else{
dtd.reject(d);
}
returndtd.promise();
});
Validator.prototype.addRules("maxLen",function(d,value,attributeValue){
vardtd=$.Deferred();
varok=(value.length<=attributeValue);
if(ok){
dtd.resolve(d);
}else{
dtd.reject(d,attributeValue);
}
returndtd.promise();
},function(d,rule){
if($(d).siblings("span").find("[msgid='msg_"+rule+"']").length==0){
varattributeValue=$(d).attr(rule);
varmsgInfo=getJSLocale($(d).attr("msgid"),{length:attributeValue});
varruleInfo=getJSLocale("msg_"+rule,{length:attributeValue});
varmessage=msgInfo||ruleInfo;
$(d).parent().append("<spanvalidationError><labelmsgid='msg_"+rule+"'errorMsgParam='"+attributeValue+"'>"+message+"</label></span>");
}
});
Validator.prototype.addRules("minLen",function(d,value,attributeValue){
vardtd=$.Deferred();
varok=(value.length>=attributeValue);
if(ok){
dtd.resolve(d);
}else{
dtd.reject(d,attributeValue);
}
returndtd.promise();
},function(d,rule){
if($(d).siblings("span").find("[msgid='msg_"+rule+"']").length==0){
varattributeValue=$(d).attr(rule);
varmsgInfo=getJSLocale($(d).attr("msgid"),{length:attributeValue});
varruleInfo=getJSLocale("msg_"+rule,{length:attributeValue});
varmessage=msgInfo||ruleInfo;
$(d).parent().append("<spanvalidationError><labelmsgid='msg_"+rule+"'errorMsgParam='"+attributeValue+"'>"+message+"</label></span>");
}
});
Validator.prototype.addRules("url",function(d,value,attributeValue){
returnValidator.prototype.validationByRegx(d,value,/^(((ht|f)tp(s?))\:\/\/)[a-zA-Z0-9]+\.[a-zA-Z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/i);
});
Validator.prototype.addRules("email",function(d,value,attributeValue){
returnValidator.prototype.validationByRegx(d,value,/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/);
});
Validator.prototype.addRules("english",function(d,value,attributeValue){
returnValidator.prototype.validationByRegx(d,value,/^[a-zA-Z0-9_\-]+$/);
});

对于html 页面的验证方式呢，采用如下方式:

<div><h2>自定义验证框架测试</h2></div>
<div>
<divid="required_valid_div">
<inputtype="text"requiredminLen="3"maxLen="5"/><p/>
english:<inputtype="text"requiredenglishmaxLen="50"/><p/>
<inputtype="text"requiredmaxLen="50"/><p/>
<inputtype="text"urlrequired/><p/>
email:<inputtype="text"email/><p/>
<selectrequired>
<optionvalue="">请选择</option>
<optionvalue="1">中国</option>
</select>
<p/>
<textarearequiredmaxLeng="500"></textarea><p/>
自定义错误信息:<inputtype="text"urlrequiredmsgid="myUrlError"/><p/>
</div>
<buttononclick="javascript:validatorDiv();">验证</button>
<buttononclick="javascript:loadI18nCN();">Load中文国际化</button>
<buttononclick="javascript:loadI18NEN();">LoadEnglishi18N</button>
</div>

其中有很多自定义的属性，比如required,maxLen, url,email 等。当然部分与HTML5的有冲突，也不矛盾。如果不想冲突，当然可以另外定义，但要注意validation.js 要同步修改，还有i18n 国际化文件. 在这里面我自定义了一个自定义错误信息，如果有msgid 属性的会去找msgid 对应的国际化消息，否则会去找rule_加上自定义属性的消息. 这是为了自己的项目定制的。

js 国际化的支持

varJSLocale={
msg_required:"不能为空",
msg_maxLen:"最大长度{{:length}}.",
msg_minLen:"最小长度{{:length}}.",
msg_url:"不合法的网址",
msg_email:"Email不合法",
msg_english:"只允许输入0-9，a-z,A-Z",
myUrlError:"自定义错误提示：url不合法哦",
end:""
};

测试效果