昨天偶然间在 http://segmentfault.com/ 上看到一篇关于表单验证进阶的文章，链接见底部，之后便自己手动试了一遍（尝试是最快的吸收新知识的途径~）。
下面是思路：
1.首先，我们第一个想到的方法是下面这种
var username = '';
if(username.length===0||username==null){
console.log("用户名不能为空！");
}else{
console.log("success");
}
但是这种写法有明显的缺点——重用性太差。
2.所以我们想到是不是可以通过创建对象的方式来解决上面的问题
var validate = (function(){
var messages = {
isEmpty : '必须输入用户名',
isNum : '必须为数字'
};
var validateTypes ={
isEmpty:function(value){
if(value==null||value.length===0){
return true;
}
return false;
},
isNum:function(value){
var reg = /\d+/;
if(!reg.test(value)){
return true;
}
return false;
}
};
return function(value,type){
if(validateTypes[type](value)){
return messages[type];
}
}
})();
console.log(validate("","isEmpty")); //必须输入用户名
console.log(validate("yin_x_f@163.com","isEmpty")); //undefine
console.log(validate("test","isNum")); //必须为数字
console.log(validate(111,"isNum")); //undefine
这种方法是解决了重要的问题，但是仍然存在一个缺点：一次只能进行一个控件的一种验证，能不能进行一对多的验证
3.我们加一个检测类
var validate = (function(){
var messages = {
isEmpty : '不能为空',
isNum : '必须为数字'
};
var validateTypes ={
isEmpty:function(value){
if(value==null||value.length===0){
return true;
}
return false;
},
isNum:function(value){
var reg = /\d+/;
if(!reg.test(value)){
return true;
}
return false;
}
};
return function(value,type){
if(validateTypes[type](value)){
return messages[type];
}
}
})();
var detects = function(value,types){
var results =[];
for(index in types){
var msg = validate(value,types[index]);
if(msg){ //如果信息存在
results.push(msg);
}
}
return results;
};
console.log(detects("",["isEmpty","isNum"])); //["不能为空", "必须为数字"]
这种写法是不是比前2种好多了，但是我们想能不能有个方法能够同时验证多个对象，进行多对多的检测类
4.终极方法~~
var validate = (function(){
var messages = {
isEmpty : '必须输入用户名',
isNum : '必须为数字'
};
var validateTypes ={
isEmpty:function(value){
if(value==null||value.length===0){
return true;
}
return false;
},
isNum:function(value){
var reg = /\d+/;
if(!reg.test(value)){
return true;
}
return false;
}
};
return function(value,type){
if(validateTypes[type](value)){
return messages[type];
}
}
})();
var detects = function(){
this.results = [];
};
detects.prototype.add =function(value,types){
for (var index in types){
var msg = validate(value,types[index]);
if(!!msg){
this.results.push(msg);
}
}
}
detects.prototype.getResult = function(){
var result = this.results;
return result;
}
detects.prototype.isTrue = function(){
var result = this.results;
return result.length>0 ? false : true;
}
var detectInstance = new detects();
detectInstance.add("",["isEmpty","isNum"]);
detectInstance.add("www",["isEmpty","isNum"]);
console.log(detectInstance.getResult()); //["必须输入用户名", "必须为数字", "必须为数字"]
if(detectInstance.isTrue){
console.log("有未通过验证的项");
}else{
console.log("都通过了验证");
} //有未通过验证的项
这是在简书上正式写的第一篇文章，markdown的语法很好用，这也算是正式开启我的记录之旅啦，虽然以前也在其他网上写了一些，但是都很杂，支持简书，支持简叔~
最后，点此查看原文。
