使用JavaScript策略模式校验表单

更新日期: 2020-02-15阅读: 1.9k标签: 验证

表单校验

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函数里面添加相应的数组处理逻辑即可


策略模式的优点

优点:

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


总结:

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

本文引用自《Javascript设计模式与开发实践》

链接: https://fly63.com/article/detial/8214

Validate表单验证插件之常用参数介绍

Validate常用的一些参数和方法:errorElement,errorClass,errorPlacement,errorLabelContainer,errorContainer,wrapper,success,debug

html实现邮箱发送邮件_js发送邮件至指定邮箱功能

在前端开发中,JavaScript并没有提供直接操作Email邮箱的功能方法,但是遇到这样的需求,我们应该如何实现js发送邮件至指定邮箱功能呢?

vue短信验证性能优化写入localstorage中

当点击完按钮时,倒计时还没到60s过完时,刷新浏览器,验证码按钮又可以重新点击;就需要把时间都写到localstorage里面去,当打开页面的时候,就去localstorage里面去取,我这里就贴上我的解决方法,因为前几天有个vue的项目用到该方法

登陆时短信验证码的原理,实现

陆时需要发送短信验证码或者其他的验证方式来校验是否是本人操作,达到安全性的目的。点击获取验证码时,倒计时,暂时设定倒计时的时间为180秒....

网页如何实现拼图滑块的验证码_纯js的实现

滑动解锁应该是有两张图片,一张正常的,一张上面有解锁区域的(后端给),然后前端只用把用户释放鼠标后,滑动模块在图片上的xy轴传给后端,后端做成功与否的判断。如果只是纯前端js验证,不具备高安全性。

风火云短信验证码接收平台, 接码快速,平台稳定,简单易学

目前的社会发展得非常快,互联网产业的发展更是让很多人惊奇,平台越来越多也导致了搭载程序的要求必须高,服务平台完善性还体现于短信验证码是否具备,只有在具备的前提下才能有着更大的保证

验证码的分类_ 网页验证码有哪些方式?

早期的互联网是没有验证码的,随着后来计算机程序的发展,黑客编写了模仿登录、恶意破解密码、刷票、论坛灌水等恶意程序,破坏了整个网络的平衡性。介绍目前常用验证码的分类有哪些:Gif动画验证码、手机短信验证码、手机语音验证码、视频验证码、滑动验证码

滑动验证码原理实现

滑动验证码在很多网站逐步流行起来,一方面对用户体验来说,比较新颖,操作简单,另一方面相对图形验证码来说,安全性并没有很大的降低。常见验证码是需要输入图中字符的,是因为机器识别字符比较困难,以此来防止机器自动的行为。

基于react的滑动图片验证码组件

业务需求,需要在系统登陆的时候,使用“滑动图片验证码”,来验证操作的不是机器人。在一般的页面组件引用即可。onReload这个函数一般是用来请求后台图片的。

Vue中的验证登录状态

Vue项目中实现用户登录及token验证,先说一下我的实现步骤:使用easy-mock新建登录接口,模拟用户数据;使用axios请求登录接口,匹配账号和密码,账号密码验证后, 拿到token,将token存储到sessionStorage中,并跳转到首页

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!