表单验证请进!!!

Paul_King 发布于2019-08-19 17:22 / 1192人阅读

摘要：每一个项目，都要重写验证规则，验证逻辑，那感觉简直想屎。自从遇见了策略者模式，产经你不是要加验证吗没问题。这个验证规则不行，替换没问题。你这只是一对多的验证规则，当我要提交表单的时候，我还有其他的都需要验证呢。

策略者模式

还在为你表单验证头疼吗？还在为产经无理取闹，要你每个输入框都加验证而感到烦恼吗？还在忙于复制粘贴验证规则而感到厌烦吗？那么策略者模式是最适合你的。
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());   //["不能为空"]

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

云服务器 GPU云服务器验证表单表单验证请进表单验证代码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78466.html

CrossPHP 1.5.8 发布了

摘要：更新说明优化提升接口开发体验集成参数验证及接口测试文档自动生成一设置文档标题设置文档头部标题和版本号一个项目只定义一次即可二为类设置名称默认文档左侧导航类的名称定义在类的注释中三接口定义在方法体定义获取框架当前版本号由三部分组成允许访问的请 1.5.8 更新说明 Skeleton优化提升接口开发体验, 集成参数验证及接口测试文档自动生成一, 设置文档标题 @cp_doc_info...

shleyZ 2019-06-27 15:11 评论0 收藏0
Vue-book 2.0 一个移动端简单的全栈 web APP

摘要：本项目是一个简单的全栈项目，前端新手可以拿来练练手。项目实现了一些简单的功能，后台可以对图书进行录入录出扫码或手动，前台显示录入的图书，并且前台注册登录后可以将书的订单发给服务器，并存到服务器。 Vue-book 2.0 Github 地址：https://github.com/percy507/v... 【觉得不错就来个 star 吧 ^_^】说明（菜鸟请进，大神绕道 ~）前端...

wh469012917 2019-06-27 16:37 评论0 收藏0
Vue-book 2.0 一个移动端简单的全栈 web APP

摘要：本项目是一个简单的全栈项目，前端新手可以拿来练练手。项目实现了一些简单的功能，后台可以对图书进行录入录出扫码或手动，前台显示录入的图书，并且前台注册登录后可以将书的订单发给服务器，并存到服务器。 Vue-book 2.0 Github 地址：https://github.com/percy507/v... 【觉得不错就来个 star 吧 ^_^】说明（菜鸟请进，大神绕道 ~）前端...

NotFound 2019-08-20 16:53 评论0 收藏0
老板让我十分钟上手nx-admin

摘要：我就是一游客系统获取我的信息拿到权限值动态加载路由通行不是。。我是权限汪等等我看看作者有没有把你降级没有好了。。你还是权限汪请进有滚吧你已经不是权限汪了作者已经把你写成战斗力只有的渣渣了没有没有还敢闯这里滚去关口没错，就这么简单。大体流程参考资料: nx-admin项目地址首先这里就不讲解vue和vuex之类的基础东西了有兴趣的可以去官方文档了解。这里根据流程走向大概说说路由...

DevYK 2019-08-22 18:35 评论0 收藏0