昨天偶然間在 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的語法很好用，這也算是正式開啟我的記錄之旅啦，雖然以前也在其他網上寫了一些，但是都很雜，支持簡書，支持簡叔~
最后，點此查看原文。
