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

背景

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

之前项目里的验证代码写的很凌乱，最近刚好遇到这个模块的功能需要重构，于是对代码做了大量的优化，记录一下如何利用策略模式优化表单验证的

优化前

之前我们的验证代码是这样写的，把验证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,
}]

以上就是我对表单验证规则的优化心得，有哪里需要改进的希望大家可以指点出来，相互交流