策略模式设计表单校验

浏览器

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
    }
}

本文由 创作，采用 知识共享署名4.0 国际许可协议进行许可。本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名。最后编辑时间为: 2020/05/07 03:23