策略模式设计表单校验

简介:
  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
        }
    }

相关文章
|
7月前
|
设计模式 算法 Java
工厂模式、模板模式和策略模式的混合使用
工厂模式又叫做工厂方法模式,是一种**创建型**设计模式,一般是在父类中提供一个创建对象的方法,允许子类决定实例化对象的类型。
108 0
工厂模式、模板模式和策略模式的混合使用
|
5月前
|
算法
策略模式如何实现开闭原则?
【7月更文挑战第2天】策略模式如何实现开闭原则?
59 1
|
7月前
|
设计模式 算法
模板模式
​ 如有错误或有补充,以及任何改进的意见,请留下您的高见 定义 模板模式是一种行为型设计模式,它在一个抽象类中公开定义了执行它的方法的方式/模板。子类可以按需重写方法实现,但调用将以抽象类中定义的方式进行。这种模式的核心思想是将一个算法的骨架定义在一个抽象类中,而将一些步骤延迟到子类中实现。 实现模板模式的步骤包括: 抽象出一个模板类,该类定义了执行算法的骨架。 抽象类中定义算法的骨架,骨架中的具体算法由子类实现。 子类按需重写方法实现,但调用将以抽象类中定义的方式进行。 使用final修饰模板方法,防止别人重写模板方法。 优点 提高了代码的可维护性和复用性。 减少了代码冗余,使算法的修
37 0
|
7月前
行为型 模板模式
行为型 模板模式
40 0
|
设计模式 算法 数据库
23种设计模式_MODE14模板模式_手写代码实现
23种设计模式_MODE14模板模式_手写代码实现
|
设计模式 算法 Java
详解模板模式
1.概述 模板模式是一种常用的设计模式,它定义了一个操作中的算法的骨架,将某些步骤延迟到子类中实现。模板模式使得子类可以在不改变算法结构的情况下重新定义算法中的某些步骤。 模板模式中有两个角色:
142 0
|
设计模式 JavaScript 前端开发
设计模式 - 混入模式(Mixin Pattern)
在JavaScript中,Mixin Pattern(混入模式)是一种强大的设计模式,它允许开发者在类之间共享方法和属性,实现代码的复用和模块化。Mixin模式可以让我们轻松地扩展一个类,同时保持代码的简洁和可维护性。本文将从浅入深,介绍如何使用JavaScript实现Mixin Pattern。
337 0
|
设计模式 算法 搜索推荐
Java设计模式-模板模式(template)
Java设计模式-模板模式(template)
|
设计模式 算法 JavaScript
优雅的写表单校验 -- 策略模式的运用
优雅的写表单校验 -- 策略模式的运用
100 0
|
设计模式 Java Spring
枚举方式实现设计模式-策略模式
枚举方式实现设计模式-策略模式
枚举方式实现设计模式-策略模式