原生js验证表单的优化—策略者模式

昨天偶然间在 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的语法很好用，这也算是正式开启我的记录之旅啦，虽然以前也在其他网上写了一些，但是都很杂，支持简书，支持简叔~
最后，点此查看原文。