252      阿里云  技术社区[云栖]

策略模式设计表单校验

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

   
   

最后更新：2017-11-17 15:05:19

  上一篇：  虚拟内存是啥？能关掉吗

  下一篇：  未来智慧城市长啥样? 大咖解答：万物互联成“智能体”