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

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