扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
怎么自定义一个javascript验证框架？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。
创新互联公司是一家朝气蓬勃的网站建设公司。公司专注于为企业提供信息化建设解决方案。从事网站开发，网站制作，网站设计，网站模板，微信公众号开发，软件开发，小程序设计，10年建站对成都搅拌罐车等多个行业，拥有多年的网站维护经验。
1. 验证框架主要采用 jquery异步对象去扩展的，也就是jquery defered 的用法，这样去做验证的好处是，即使某些验证是采用ajax 方式去验证的，结合jquery when 函数，一样可以批量校验. 主要代码如下:
function Validator(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){
var self = this;
$(item).die().live("blur", function(){
self.validateItem(item);
});
},
bindingEvent : function(divId){
var self = this;
self.elements.forEach(function(element){
$("#" + divId).find(element).each(function(i, item){
self.eventFunction(item);
});
});
},
validateDiv : function(divId){
var dtdList = [],
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){
var deferred = $.Deferred();
deferred.resolve();
dtdList.push(deferred);
}
});
return $.when.apply(null, dtdList).fail(function(){
if(self.errorHandle) {
self.errorHandle.call(null, divId);
}
});
},
validateItem : function(d){
var self = this;
var ruleList = [];
for(var r in this.rules){
if( $(d).is("[" + r + "]") ){
ruleList.push(r);
}
}
var dtd = $.Deferred();
var checked = function(){
if ( ruleList.length >= 1 ){
var ok = 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();
//return dtd;
};
checked();
return dtd;
},
validate : function(d, rule){
var value = $(d).val(),
attributeValue = $(d).attr(rule),
f = this.rules[rule].validFunction,
self = this;
var ok = f.call(null, d, value, attributeValue);
return ok.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){
var dtd = $.Deferred(),
ok = regx.test(value);
if(ok || $.trim(value) === ""){
dtd.resolve(d);
} else {
dtd.reject(d);
}
return dtd.promise();
},
/*默认的出错处理方法*/
showErrorMessage : function(item,rule){
var msgInfo = getJSLocale( $(item).attr("msgid") );
var ruleInfo = getJSLocale( "msg_" + rule );
if($(item).siblings("span").find("[msgid='msg_"+ rule +"']").length == 0){
var message = msgInfo || ruleInfo;
$(item).parent().append("" + message + "");
}
}
};
//add default rule
Validator.prototype.addRules("required", function(d, value, attributeValue){
var dtd = $.Deferred();
var ok = !($.trim(value) == "" || value == null);
if(ok){
dtd.resolve(d);
} else {
dtd.reject(d);
}
return dtd.promise();
});
Validator.prototype.addRules("maxLen", function(d, value, attributeValue){
var dtd = $.Deferred();
var ok = (value.length <= attributeValue);
if(ok){
dtd.resolve(d);
} else {
dtd.reject(d, attributeValue);
}
return dtd.promise();
}, function(d, rule){
if($(d).siblings("span").find("[msgid='msg_" + rule + "']").length == 0){
var attributeValue = $(d).attr(rule);
var msgInfo = getJSLocale( $(d).attr("msgid"), {length:attributeValue} );
var ruleInfo = getJSLocale( "msg_" + rule, {length:attributeValue} );
var message = msgInfo || ruleInfo;
$(d).parent().append("" + message + "");
}
});
Validator.prototype.addRules("minLen", function(d, value, attributeValue){
var dtd = $.Deferred();
var ok = (value.length >= attributeValue);
if(ok){
dtd.resolve(d);
} else {
dtd.reject(d, attributeValue);
}
return dtd.promise();
}, function(d, rule){
if($(d).siblings("span").find("[msgid='msg_" + rule + "']").length == 0){
var attributeValue = $(d).attr(rule);
var msgInfo = getJSLocale( $(d).attr("msgid"), {length:attributeValue} );
var ruleInfo = getJSLocale( "msg_" + rule, {length:attributeValue} );
var message = msgInfo || ruleInfo;
$(d).parent().append("" + message + "");
}
});
Validator.prototype.addRules("url", function(d, value, attributeValue){
return Validator.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){
return Validator.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){
return Validator.prototype.validationByRegx(d, value, /^[a-zA-Z0-9_\-]+$/);
}); 对于html 页面的验证方式呢，采用如下方式: