如何使用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 相关文章推荐
JQuery+Ajax无刷新分页的实例代码
Feb 08 Javascript
jQuery照片伸缩效果不影响其他元素的布局
May 09 Javascript
js 加密压缩出现bug解决方案
Nov 25 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
Jun 04 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
Aug 01 Javascript
浅析JavaScript中作用域和作用域链
Dec 06 Javascript
JS中微信小程序自定义底部弹出框
Dec 22 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
Jul 02 Javascript
JS计算距当前时间的时间差实例
Dec 29 Javascript
vue数据控制视图源码解析
Mar 28 Javascript
JavaScript实现的简单Tab点击切换功能示例
Jul 06 Javascript
es6中比较有用的7个技巧小结
Jul 12 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图片验证码代码
2008/03/27 PHP
一周让你学会PHP 不错的学习资料
2009/02/06 PHP
php 随机排序广告的实现代码
2011/05/09 PHP
PHP手机号码归属地查询代码(API接口/mysql)
2012/09/04 PHP
数组与类使用PHP的可变变量名需要的注意的问题
2013/06/20 PHP
PHP PDOStatement对象bindpram()、bindvalue()和bindcolumn之间的区别
2014/11/20 PHP
Laravel使用memcached缓存对文章增删改查进行优化的方法
2016/10/08 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
JavaScript delete 属性的使用
2009/10/08 Javascript
jquery 选择器部分整理
2009/10/28 Javascript
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
2013/04/11 Javascript
EXTjs4.0的store的findRecord的BUG演示代码
2013/06/08 Javascript
基于SVG的web页面图形绘制API介绍及编程演示
2013/06/28 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
2013/08/23 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
2015/03/09 Javascript
JS图片压缩(pc端和移动端都适用)
2017/01/12 Javascript
浅析JavaScript中var that=this
2017/02/17 Javascript
纯js的右下角弹窗实例
2017/03/12 Javascript
animate.css在vue项目中的使用教程
2018/08/05 Javascript
浅谈开发eslint规则
2018/10/01 Javascript
Vue项目引进ElementUI组件的方法
2018/11/11 Javascript
基于JavaScript实现每日签到打卡轨迹功能
2018/11/29 Javascript
JS隐藏号码中间4位代码实例
2019/04/09 Javascript
js实现无缝滚动双图切换效果
2019/07/09 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
2020/02/11 Javascript
[01:33:07]VGJ.T vs Newbee Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
Python实现多行注释的另类方法
2014/08/22 Python
python获取图片颜色信息的方法
2015/03/18 Python
Python实现的括号匹配判断功能示例
2018/08/25 Python
Django和Flask框架优缺点对比
2019/10/24 Python
香港士多网上超级市场:Ztore
2021/01/09 全球购物
TCP/IP模型的分界线
2012/12/01 面试题
控制工程专业个人求职信
2013/09/25 职场文书
农村婚庆主持词
2015/06/29 职场文书
R9700摩机记
2022/04/05 无线电
Flutter集成高德地图并添加自定义Maker的实践
2022/04/07 Java/Android