如何利用 策略模式 优化表单验证

背景

在作移动端项目开发的时候，常常会遇到各类表单验证，有时候不一样的页面，验证规则是同样的 ,如图

以前项目里的验证代码写的很凌乱，最近恰好遇到这个模块的功能须要重构，因而对代码作了大量的优化，记录一下如何利用策略模式优化表单验证的

优化前

以前咱们的验证代码是这样写的，把验证func写到一个公共模块里面，而后每一个方法返回一个包含是否经过和message字段的对象

//common.js
export default {
  validateName: function (data, message = '', flag = false) {
    if (!/xxx/.test(data)) {
      message = '验证不经过提示语'
    } else {
      flag = true
    }
    return {
      message,
      flag
    }
  },
  validatePhone: function (data, message = '') {},
  validateAddress: function (data, message = '') {}
}

而后在业务代码里面引用，这种不只代码量比较大，并且这种基础验证模块和业务模块耦合严重，咱们应该尽可能作到将不一样模块和功能代码分离，提升代码的可扩展性

优化后

若是验证不经过，在基础验证代码里当即弹出msg，业务代码只须要判断返回的是true或者false就好了

//common.js
export default {
  validateName: function (data, msg = '') {
    if (!/xxx/.test(data)) {
      msg = '验证不经过提示语'
    }
    msg && alert(msg)
    return !!msg
  },
  validatePhone: function (data, msg = '') {},
  validateAddress: function (data, msg = '') {}
}

这样业务代码看上去很简洁

//index.js
import validate from './common.js'
const keys = Object.keys(validate)
//经过some方法，有1个验证不经过，就跳出验证，而后主业务代码里经过判断validateResult的值，验证是否彻底经过。
//还有dataKey须要和validateKey有必定的映射规则
const validateResult = keys.some(key => {
  return !validate[key](this.data[dataKey])
})

若是你的验证方法包含了不少本页面用不到的其余验证规则，你只需在业务代码添加一个白名单字段

const whiteList = ['validatePhone','validateName','validateAddress']

若是你的验证有前后顺序，添加一个优先级字段

const whiteList = [{
    name:'validatePhone',
    level:1,
},{
    name:'validateName',
    level:2,
}]

以上就是我对表单验证规则的优化心得，有哪里须要改进的但愿你们能够指点出来，相互交流