如何使用JavaScript策略模式校验表单


Posted in Javascript onApril 29, 2021

概述

Web项目中,登录,注册等等功能都需要表单提交,当把用户的数据提交给后台之前,前端一般要做一些力所能及的校验,比如是否填写,填写的长度,密码是否符合规范等等,前端校验可以避免提交不合规范的表单。

假如我们有一个表单,校验逻辑如下:

  • 用户名不为空
  • 密码长度不低于6位
  • 手机号符合格式

未使用策略模式的表单校验

当没有使用策略模式时,即我们首先会想到的校验模式通常是这样的:

<body>
    <form id="registerForm">
        <label for="username">输入用户名:<input type="text" name="username"></label>
        <label for="password">输入密码:<input type="password" name="password"></label>
        <label for="phone">输入密码:<input type="text" name="phone"></label>
    </form>
    <script>
        const form = document.querySelector('.registerForm');
        form.onsubmit = function(){
            if(form.username.value === ''){
                alert('用户名不能为空')
                return;
            }
            if(form.password.value.length < 6){
                alert('密码长度不能小于6位')
                return;
            }
            if(!/(^1[3|5|8][0-9]{9}$)/.test(form.phone.value)){
                alert('手机号格式不正确')
                return;
            }
        }
    </script>
</body>

这种代码编写方式十分常见,但它的缺点同样很明显:

  • onsubmit函数过于庞大,包含很多if-else,要覆盖所有规则
  • onsubmit函数缺乏弹性,如果要进入一种新的校验规则,就要改函数的内容实现,违反开放-闭合原则
  • 代码复用性较差,如果再写一个表单,就要复制很多重复的代码

使用策略模式优化

首先封装校验函数为一个对象:

const strategies = {
    empty(value, errMsg){
        if(value.length === 0){
            return errMsg;
        }
    },
    minLength(value, len, errMsg){
        if(value.length < len){
            return errMsg;
        }
    },
    isMobile(value, errMsg){
        if(!/(^1[3|5|8][0-9]{9}$)/.test(value)){
            return errMsg;
        }
    }
}

我们还要一个Validator类, 这个类用于向目标表单添加验证规则,它的用法如下:

const validate = function(){
    const validator = new Validator();
    validator.add(Form.userName, 'empty', '用户名不能为空');
    validator.add(Form.password, 'minLength:6', '密码长度不能少于6位');
    validator.add(Form.phone, 'isMobile', '手机号码格式不正确');
    const errMsg = validator.start();
    return errMsg;
}

如代码所示,validator实例有add方法,接收3个参数,第一个为需要验证的表单实例,第二个为验证方法,冒号后面为传入的参数。第三个为验证未通过的错误提示信息。

start方法,用于启动校验,如果没通过会返回未通过的提示信息,可在之后的逻辑中进行处理

Validator类的编写:

class Validator {
    constructor(){
        this.rules = [];
    }
    add(elem, rule, err){
        const args_arr = rule.split(":");
        this.rules.push(()=>{
            const handler = args_arr.shift();
            args_arr.unshift(elem.value);
            args_arr.push(err);
            return strategies[handler].apply(elem, args_arr)
        })
    }
    start(){
        let errmsg = []
        for(let i = 0; i < this.rules.length; i++ ){
            const err = this.rules[i]();
            if(err){
                errmsg.push(err)
            }
        }
        return errmsg.join(",");
    }
}

使用策略模式,我们使用配置的方式完成了表单的校验,这些规则可以用在以后任何校验表单的地方,更方便修改与复用

为单一表单项增加多个验证规则

我们的代码现在有一个缺点,就是只能为某一个表单项赋单一验证规则,无法实现一个表单多个验证规则,所以代码还有优化的空间

class Validator{
    // ···
    add(elem, rules){
        rules.forEach(rule => {
            const args_arr = rule.strategy.split(":");
            this.rules.push(()=>{
                const handler = args_arr.shift();
                args_arr.unshift(elem.value);
                args_arr.push(rule.errMsg);
                return strategies[handler].apply(elem, args_arr)
            })
        });
    }
    // ···
}

const validate = function(){
    const validator = new Validator();
    validator.add(Form.username,[{
        strategy: 'empty',
        errMsg: '用户名不能为空'
    }]);
    validator.add(Form.password, [{
        strategy: 'minLength:6',
        errMsg: '密码长度不能少于6位'
    }]);
    validator.add(Form.phone, [{
        strategy: 'isMobile',
        errMsg: '手机号码格式不正确'
    }, {
        strategy: 'empty',
        errMsg: '手机号不能为空'
    }]);
    const errMsg = validator.start();
    return errMsg;
}

只需要传参时传入一个对象数组,并在add函数里面添加相应的数组处理逻辑即可

策略模式的优点

优点:

  • 避免多重条件选择语句
  • 实现开闭原则,使得函数的使用更加易于切换,易于理解,易于扩展。
  • 提高代码复用程度

总结

Peter Norvig说过,在函数作为一等对象的语言中,策略模式是隐形,strategy就是值为函数的变量。其实就是将封装好的策略函数当成参数传给使用它的target,被target调用的过程,用好策略模式,不仅让我们对该模式有更加深刻的理解,也使我们明白使用函数的好处。

以上就是如何使用JavaScript策略模式校验表单的详细内容,更多关于JavaScript资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
js对象的构造和继承实现代码
Dec 05 Javascript
根据json字符串生成Html的一种方式
Jan 09 Javascript
javascript中的onkeyup和onkeydown区别介绍
Apr 28 Javascript
jQuery里filter()函数与find()函数用法分析
Jun 24 Javascript
js实现人才网站职位选择功能的方法
Aug 14 Javascript
JavaScript的removeChild()函数用法详解
Dec 27 Javascript
分享jQuery插件的学习笔记
Jan 14 Javascript
JS获取当前脚本文件的绝对路径
Mar 02 Javascript
轻松理解JavaScript闭包
Mar 14 Javascript
javascript编程实现栈的方法详解【经典数据结构】
Apr 11 Javascript
原生js实现trigger方法示例代码
May 22 Javascript
详解微信小程序中var、let、const用法与区别
Jan 11 Javascript
react中props 的使用及进行限制的方法
Apr 28 #Javascript
React Hook用法示例详解(6个常见hook)
vue使用v-model进行跨组件绑定的基本实现方法
为什么node.js不适合大型项目
JavaScript控制台的更多功能
Apr 28 #Javascript
JavaScript使用canvas绘制坐标和线
JS Object构造函数之Object.freeze
Apr 28 #Javascript
You might like
PHP array操作10个小技巧分享
2011/06/23 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
Prototype使用指南之selector.js
2007/01/10 Javascript
jQuery 使用手册(一)
2009/09/23 Javascript
jQuery技巧总结
2011/01/01 Javascript
jQuery的运行机制和设计理念分析
2011/04/05 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
2014/01/11 Javascript
Node.js和PHP根据ip获取地理位置的方法
2014/03/14 Javascript
JS 拦截全局ajax请求实例解析
2016/11/29 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
2017/01/21 Javascript
Angular.JS中的指令引用template与指令当做属性详解
2017/03/30 Javascript
nodejs接入阿里大鱼短信验证码的方法
2017/07/10 NodeJs
angular2系列之路由转场动画的示例代码
2017/11/09 Javascript
JavaScript实现与使用发布/订阅模式详解
2019/01/19 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
2019/06/20 Javascript
vue.js实现左边导航切换右边内容
2019/10/21 Javascript
[00:20]DOTA2荣耀之路7:-ah fu-抢盾
2018/05/31 DOTA
python类继承用法实例分析
2014/10/10 Python
python黑魔法之参数传递
2016/02/12 Python
Python实现将不规范的英文名字首字母大写
2016/11/15 Python
Python控制Firefox方法总结
2019/06/03 Python
Python中栈、队列与优先级队列的实现方法
2019/06/30 Python
浅谈python输出列表元素的所有排列形式
2020/02/26 Python
python filecmp.dircmp实现递归比对两个目录的方法
2020/05/22 Python
世界上最悠久的自行车制造商:Ribble Cycles
2017/03/18 全球购物
乐高奥地利官方商店:LEGO Shop AT
2019/07/16 全球购物
Internal修饰符有什么含义
2013/07/10 面试题
写自荐信要注意什么
2013/12/26 职场文书
大学新生军训感言
2014/02/25 职场文书
软件毕业生个人鉴定
2014/03/03 职场文书
社区班子对照检查材料
2014/08/27 职场文书
教师党员自我评价2015
2015/03/04 职场文书
2015年社区工作总结
2015/04/08 职场文书
老乡会致辞
2015/07/28 职场文书
优秀教师主要事迹材料
2015/11/04 职场文书
七年级作文之下雨天
2019/12/23 职场文书