黑马程序员技术交流社区

标题: 【广州前端】- 表单验证请进!!! [打印本页]

作者: 老哥哥    时间: 2018-12-20 15:37
标题: 【广州前端】- 表单验证请进!!!
还在为你表单验证头疼吗?还在为产品无理取闹,要你每个输入框都加验证而感到烦恼吗?还在忙于复制粘贴验证规则而感到厌烦吗? 那么策略者模式是最适合你的。

What are u talking about?

上面其实是我的切身体会,我也相信有许许多多的font-end踩过这个坑。每一个项目,都要重写验证规则,验证逻辑,那感觉简直想屎。自从遇见了策略者模式,产经你不是要加验证吗?没问题。 这个验证规则不行,替换~ 没问题。这里需要多加一个验证规则,没问题。

我想我们以前写代码会是这样的

[AppleScript] 纯文本查看 复制代码
var username = document.querySelector("username").value; 
var reg = /\\w+/;
if(username.length===0||username==null){
    alert("用户名不能为空!");
}else if(!reg.test(username)){
    alert("用户名格式不正确!");
}
...


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

[AppleScript] 纯文本查看 复制代码
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"));  
// "不能为空!"

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

[AppleScript] 纯文本查看 复制代码
//返回多个检测的结果,如果验证都通过则返回空的数组 
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都需要验证呢。你有没有多对多的检测类。
有的,客官~
[AppleScript] 纯文本查看 复制代码
//总的代码如下,如果有兴趣可以拷贝测试一下。

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());
//["不能为空"]


恩~ 可以了~
如果大家领悟的话,可以自己写一个策略者模式的表单检测。前端最好的学习方式就是看书加实践(造轮子)。

点击查看更多精彩前端资源
点击有惊喜








欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2