昨天偶然间在 http://segmentfault.com/ 上看到一篇关于表单验证进阶的文章，链接见底部，之后便自己手动试了一遍（尝试是最快的吸收新知识的途径~）。
下面是思路：
1.首先，我们第一个想到的方法是下面这种

1
2
3
4
5
6
var username = '';
if(username.length===0||username==null){
       console.log("用户名不能为空！");
}else{
       console.log("success");
}

但是这种写法有明显的缺点——重用性太差。

2.所以我们想到是不是可以通过创建对象的方式来解决上面的问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
          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.我们加一个检测类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
      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.终极方法~~

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
    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("都通过了验证");
} //有未通过验证的项