表单验证请进!!!

策略者模式

还在为你表单验证头疼吗？还在为产经无理取闹，要你每个输入框都加验证而感到烦恼吗？还在忙于复制粘贴验证规则而感到厌烦吗？ 那么策略者模式是最适合你的。
What are u talking about?
上面其实是我的切身体会，我也相信有许许多多的font-end踩过这个坑。每一个项目，都要重写验证规则，验证逻辑，那感觉简直想屎。自从遇见了策略者模式，产经你不是要加验证吗？没问题。 这个验证规则不行，替换~ 没问题。这里需要多加一个验证规则，没问题。
我想我们以前写代码会是这样的

var username = document.querySelector("username").value;
var reg = /\w+/;
if(username.length===0||username==null){
    alert("用户名不能为空!");
}else if(!reg.test(username)){
    alert("用户名格式不正确!");
}
...

这种书写不是不好，只是重用性...so bad.
我们来看看策略者模式怎样写的。
首先验证部分

var validate = (function(){
    var instructions = {
        notEmpty:"不能为空!",
        isPhone:"手机号不正确!"
    };
    var types = {
        notEmpty:function(value){
            if(value==null||value.length===0){
                return false;
            }
            return true;
        },
        isPhone:function(value){
            var reg = /\d+/;
            if(reg.test(value)){
                return true;
            }
            return false;
        }
    }
    return function(value,type){ //type为检测类型,value为检测的值
        if(!types[type]){
            throw "检测类型不存在";
        }
        if(!types[type](value)){
            return instructions[type];
        }
        return false;
    }
})();
//测试
console.log(validate("","notEmpty")); // "不能为空!"

完美~
屁~
仔细观察不难发现,就是对一个输入不能验证多个内容. 那怎么满足这个需求呢？ 还得写一个检测类，相当于代理。

//返回多个检测的结果，如果验证都通过则返回空的数组
var detect = function(value,types){
    var result = [];
    if(!(types instanceof Array)){  //这里只是做类型检测，万一手贱输错了就不好了
        throw "检测类型需要为数组不正确";
    }
    for(var type of types){
        var msg = validate(value,type);
        if(msg){  //如果信息存在
            result.push(msg);
        }
    }
    return result.length?result:false;
}
console.log(detect("",["notEmpty"]));  

恩恩，这应该可以了吧。
NO NO NO ~~~
你这只是一对多的验证规则，当我要提交表单的时候，我还有其他的value都需要验证呢。你有没有多对多的检测类。
有的，客官~
//总的代码如下，如果有兴趣可以拷贝测试一下。

var validate = (function(){
    var instructions = {
        notEmpty:"不能为空!",
        isPhone:"手机号不正确!"
    };
    var types = {
        notEmpty:function(value){
            if(value==null||value.length===0){
                return false;
            }
            return true;
        },
        isPhone:function(value){
            var reg = /\d+/;
            if(reg.test(value)){
                return true;
            }
            return false;
        }
    }
    return function(value,type){ //type为检测类型,value为检测的值
        if(!types[type]){
            throw "检测类型不存在";
        }
        if(!types[type](value)){
            return instructions[type];
        }
        return false;
    }
})();
var Detect = function(){
    this.result = [];
}
Detect.prototype.add = function(value,types){
     if(!(types instanceof Array)){
        throw "检测类型只能为数组";
    }
    for(var type of types){
        var msg = validate(value,type);
        if(!!msg){
            this.result.push(msg);
        }
    }
}
Detect.prototype.getResult = function(){
    var result = this.result;
    return result.length?result:false;
}
var detect = new Detect();
detect.add("",["notEmpty"]);  //添加值的验证
detect.add(123,["isPhone"]);  //添加另外一个值的验证
console.log(detect.getResult());   //["不能为空"]

恩~ 可以了~
如果大家领悟的话，可以自己写一个策略者模式的表单检测。前端最好的学习方式就是看书加实践(造轮子).
如果还没的话，那就收藏下，万一哪天想通了呢？