策略模式设计表单校验

简介:
  1. 第一步我们要把这些校验逻辑都封装成策略对象:
    //策略对象
    var strategies = {
        isNonEmpty: function (value, errorMsg) {
            if (value === '') {
                return errorMsg
            }
        },
        minLength: function (value, length, errorMsg) {
            if (value.length < length) {
                return errorMsg
            }
        },
        isMobile: function (value, errorMsg) {
            if (!/(^1[3|5|8][0-9]{9}$)/.test(value)) {
                return errorMsg
            }
        }
    }
    

  2. 接下来我们准备实现Validator类,validator类在这里作为context,负责接收用户的请求,并委托给strategy对象。在给出Validator类的代码之前,有必要提前了解用户是如何向Validator类发送请求的,代码如下
    var form = document.getElementById('registerForm');
    var btn = document.getElementById('submit');
    btn.onclick = function(){
        console.log(form.userName.value)
        var validator = new Validator();
        validator.add(form.userName, [
            {strategy: 'isNonEmpty', errorMsg: '用户名不能为空'},
            {strategy: 'minLength:6', errorMsg: '用户名长度不能小于6'}
        ])
        validator.add(form.password, [
            {strategy: 'minLength:6', errorMsg: '密码长度不能小于6'}
        ])
        validator.add(form.phoneNumber, [
            {strategy: 'isMobile', errorMsg: '手机号格式不正确'}
        ])
        var error = validator.start();
        if (error) {
            alert(error)
        }
        return false
    }

  3. Validator类的实现
    var Validator = function () {
        this.cache = []
    }
    Validator.prototype.add = function (dom, rules) {
        var self = this
        for (var i = 0, rule; rule = rules[i++];) {
            (function (rule) {
                var strategyArr = rule.strategy.split(':');
                var errorMsg = rule.errorMsg
                self.cache.push(function () {
                    var strategy = strategyArr.shift()
                    strategyArr.unshift(dom.value)
                    strategyArr.push(errorMsg)
                    return strategies[strategy].apply(self, strategyArr)
                })
            })(rule)
        }
    }
    Validator.prototype.start = function () {
        for (var i = 0, fun; fun = this.cache[i++];) {
            var errorMsg = fun()
            if (errorMsg) return errorMsg
        }
    }

相关文章
|
16天前
|
设计模式 SQL 算法
设计模式了解哪些,模版模式
设计模式了解哪些,模版模式
19 0
|
3月前
|
设计模式 算法 自动驾驶
常见的设计模式(模板与方法,观察者模式,策略模式)
随着时间的推移,软件代码越来越庞大,随着而来的就是如何维护日趋庞大的软件系统。在面向对象开发出现之前,使用的是面向过程开发来设计大型的软件程序,面向过程开发将软件分成一个个单独的模块,模块之间使用函数进行组合,最后完成系统的开发,每次需要修改软件,如果不涉及好各个模块的关系,就会导致软件系统难以维护,从而导致软件变得不可使用。面向对象方法用对象模拟问题域中的实体,以对象间的联系刻画实体间联系
63 2
|
4月前
|
设计模式 算法 Java
二十三种设计模式全面解析-当你的代码需要多种算法时,策略模式是你的救星!
二十三种设计模式全面解析-当你的代码需要多种算法时,策略模式是你的救星!
|
4月前
|
设计模式 存储
二十三种设计模式全面解析-揭秘访问者模式:开启对象间灵活交互之门
二十三种设计模式全面解析-揭秘访问者模式:开启对象间灵活交互之门
|
8月前
|
设计模式 算法 Java
灵活选择:解析Java设计模式中的策略模式
在软件开发领域,设计模式是一组经过验证的最佳实践方法,用于解决各种常见问题。策略模式是一种行为型设计模式,其目标是定义一系列的算法,将它们封装成独立的策略类,并且使得这些策略类可以相互替换。在本文中,我们将深入了解策略模式的核心思想、应用场景以及它在Java中的实际运用。
58 0
|
8月前
|
设计模式
设计模式之模版模式
设计模式之模版模式
37 0
|
9月前
|
设计模式 JavaScript 前端开发
|
9月前
|
设计模式 缓存 算法
设计模式——组件协作模式之策略模式
现代软件专业分工之后的第一个结果是 “框架与应用程序的划分”,“组件协作” 模式通过晚期绑定,来实现框架与应用程序之间的松耦合,是二者之间协作时常用的模式。
96 0
|
设计模式 算法 JavaScript
优雅的写表单校验 -- 策略模式的运用
优雅的写表单校验 -- 策略模式的运用
71 0
|
设计模式
23种设计模式-关系模式-责任链模式(十七)
23种设计模式-关系模式-责任链模式(十七)
23种设计模式-关系模式-责任链模式(十七)

热门文章

最新文章