如何使用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 相关文章推荐
document.documentElement和document.body区别介绍
Sep 16 Javascript
javascript读取xml实现javascript分页
Dec 13 Javascript
什么是Node.js?Node.js详细介绍
Jun 01 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
Dec 16 Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
Jun 24 Javascript
jQuery表单验证简单示例
Oct 17 Javascript
微信小程序中form 表单提交和取值实例详解
Apr 20 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
Aug 15 Javascript
zTree获取当前节点的下一级子节点数实例
Sep 05 Javascript
本地搭建微信小程序服务器的实现方法
Oct 27 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
Dec 13 Javascript
javascript+css实现进度条效果
Mar 25 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 简单日历实现代码
2009/10/28 PHP
php allow_url_include的应用和解释
2010/04/22 PHP
PHP生成唯一订单号的方法汇总
2015/04/16 PHP
中高级PHP程序员应该掌握哪些技术?
2016/09/23 PHP
PHP实现登录搜狐广告获取广告联盟数据的方法【附demo源码】
2016/10/14 PHP
php页面跳转session cookie丢失导致不能登录等问题的解决方法
2016/12/12 PHP
Yii 2.0自带的验证码使用经验分享
2017/06/19 PHP
php实现微信和支付宝支付的示例代码
2020/08/11 PHP
javascript 显示当前系统时间代码
2009/12/28 Javascript
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
2012/02/27 Javascript
css与javascript跨浏览器兼容性总结
2014/09/15 Javascript
JQuery中DOM事件合成用法实例分析
2015/06/13 Javascript
javascript创建动态表单的方法
2015/07/25 Javascript
基于html5和nodejs相结合实现websocket即使通讯
2015/11/19 NodeJs
JavaScript动态创建form表单并提交的实现方法
2015/12/10 Javascript
浅谈Node.js:Buffer模块
2016/12/05 Javascript
vue数据双向绑定原理解析(get &amp; set)
2017/03/08 Javascript
微信小程序使用navigateTo数据传递的实例
2017/09/26 Javascript
小程序实现带年月选取效果的日历
2018/06/27 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
2018/08/28 Javascript
PHP webshell检查工具 python实现代码
2009/09/15 Python
python原始套接字编程示例分享
2014/02/21 Python
Pandas中把dataframe转成array的方法
2018/04/13 Python
python实现最大子序和(分治+动态规划)
2019/07/05 Python
使用matplotlib动态刷新指定曲线实例
2020/04/23 Python
解决python pandas读取excel中多个不同sheet表格存在的问题
2020/07/14 Python
Django后端按照日期查询的方法教程
2021/02/28 Python
泰国演唱会订票网站:StubHub泰国
2018/02/26 全球购物
巴基斯坦购物网站:Goto
2019/03/11 全球购物
优秀经理获奖感言
2014/03/04 职场文书
保护环境的建议书
2014/03/12 职场文书
《画风》教学反思
2014/04/16 职场文书
2015年教师学期工作总结
2015/04/30 职场文书
党员观看《筑梦中国》心得体会
2016/01/18 职场文书
nginx location中多个if里面proxy_pass的方法
2021/03/31 Servers
Android移动应用开发指南之六种布局详解
2022/09/23 Java/Android