关于前端:策略模式在表单验证中的应用

最近想要封装一个校验表单的办法，没有什么很优雅的解决思路。
明天偶尔看到了这篇文章，学到了一种新的设计模式 ….
实现也很容易了解。原文很具体，非常感谢文章的指导
原文链接：策略模式在表单验证中的利用
作者：HcySunYang

function FormValidation(VerifiPolicy) {
  // 保留策略对象
  this.strategies = VerifiPolicy
  // 验证缓存
  this.validationFns = []}

FormValidation.prototype.add = function (dom, rule, errMsg) {
  // 因为传入的是一个字符串，如 'maxLength: 16'，所以将其拆成数组不便操作
  var ary = rule.split(':')
  // 策略函数的参数
  var arg = []
  var self = this
  this.validationFns.push(function () {
    // 重置参数
    arg = []
    var ruleName = ary[0]
    arg.push(dom.value)
    // 组装参数
    if (ary[1]) {arg.push(ary[1])
    }
    arg.push(errMsg)
    arg.push(dom)
    // 调用策略函数
    return self.strategies[ruleName].apply(dom, arg)
  })
}
// 一键校验的办法
FormValidation.prototype.start = function () {var msgs = []
  for (var i = 0;i < this.validationFns.length; i++) {var msg = this.validationFns[i]()
    if (msg) {msgs.push(msg)
    }
  }
  if(msgs.length) {return msgs} else {return 'success'}
}

<form class="wrapper">
  <label for="">USERNAME</label><input type="text"name="username">
  <br>
  <label for="">PASSWORD</label><input type="text"name="password">
  <br>
</form>
<button class="button"> 提交 </button>

// 策略对象
var VerifiPolicy = {
  // 判断是否为空
  isNoEmpty: function (value, errorMsg, el) {if (value == '') {return {errorMsg, el}
    }
  },
  // 判断最小长度
  minLength: function (value, length, errorMsg, el) {if (value.length < length) {return {errorMsg, el}
    }
  },
  maxLength: function(value, length, errorMsg, el) {if(value.length > length) {return {errorMsg, el}
    }
  },
  // 判断是否为手机号
  isMobile: function (value, errorMsg) {if (!/(^1[3|5|8][0-9]{9}$)/.test(value)) {return {errorMsg, el}
    }
  }
  // 其余
}


var validation = new FormValidation(VerifiPolicy)
var form = document.querySelector('.wrapper')
validation.add(form.username, 'isNoEmpty', '用户名谬误')
validation.add(form.password, 'minLength: 6', '明码太短')
validation.add(form.password, 'maxLength: 4', '明码太长')
document.querySelector('.button').onclick = function() {var errmsg = validation.start()
  console.log(errmsg)
}
/* (3) [{…}, {…}, {…}]
0: {errorMsg: "用户名谬误", el: input}
1: {errorMsg: "明码太短", el: input}
2: {errorMsg: "明码太长", el: input}
length: 3
__proto__: Array(0) */

策略模式在表单验证中的利用

代码

应用