如何使用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 相关文章推荐
IE中jquery.form中ajax提交没反应解决方法分享
Sep 11 Javascript
Node.js安装教程和NPM包管理器使用详解
Aug 16 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
Sep 03 Javascript
分享一个自己写的简单的javascript分页组件
Feb 15 Javascript
原生js制作简单的数字键盘
Apr 24 Javascript
JS中的数组转变成JSON格式字符串的方法
May 09 Javascript
谈谈JS中的!!
Dec 07 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
Javascript 编码约定(编码规范)
Mar 11 Javascript
React Native日期时间选择组件的示例代码
Apr 27 Javascript
基于iview的router常用控制方式
May 30 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
Jul 07 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的SQL注入过程分析
2012/01/06 PHP
利用php+mcDropdown实现文件路径可在下拉框选择
2013/08/07 PHP
PHP echo,print,printf,sprintf函数之间的区别与用法详解
2013/11/27 PHP
PHP判断是否是微信打开,浏览器打开的方法
2018/03/14 PHP
Yii框架函数简单用法分析
2019/09/09 PHP
javascript与CSS复习(三)
2010/06/29 Javascript
jQuery+ajax实现顶一下,踩一下效果
2010/07/17 Javascript
简易js代码实现计算器操作
2013/04/15 Javascript
jQuery获得内容和属性方法及示例
2013/12/02 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
2015/01/13 Javascript
javaScript中slice函数用法实例分析
2015/06/08 Javascript
prototype.js常用函数详解
2016/06/18 Javascript
JS传值出现中文参数乱码的解决方法
2016/06/30 Javascript
AngularJS  ng-repeat遍历输出的用法
2017/06/19 Javascript
angularjs2中父子组件的数据传递的实例代码
2017/07/05 Javascript
Node.js中你不可不精的Stream(流)
2018/06/08 Javascript
JavaScript实现单英文金山打字通
2020/07/24 Javascript
Vue 设置axios请求格式为form-data的操作步骤
2019/10/29 Javascript
微信小程序实现星星评分效果
2020/11/01 Javascript
[57:59]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第一场 11.05
2020/11/05 DOTA
[01:48:04]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第一场 2月7日
2021/03/11 DOTA
Python获取linux主机ip的简单实现方法
2016/04/18 Python
Python定义一个跨越多行的字符串的多种方法小结
2018/07/19 Python
pyqt实现.ui文件批量转换为对应.py文件脚本
2019/06/19 Python
django-crontab 定时执行任务方法的实现
2019/09/06 Python
使用django和vue进行数据交互的方法步骤
2019/11/11 Python
Python通过fnmatch模块实现文件名匹配
2020/09/30 Python
Python基于爬虫实现全网搜索并下载音乐
2021/02/14 Python
毕业生自荐书
2013/12/18 职场文书
职务聘任书范文
2014/03/29 职场文书
春游踏青活动方案
2014/08/14 职场文书
2014年物流工作总结
2014/11/25 职场文书
荒岛余生观后感
2015/06/09 职场文书
HTML通过表单实现酒店筛选功能
2021/05/18 HTML / CSS
opencv-python图像配准(匹配和叠加)的实现
2021/06/23 Python
go语言使用Casbin实现角色的权限控制
2021/06/26 Golang