背景
在做移动端项目开发的时候，经常会遇到各种表单验证，有时候不同的页面，验证规则是一样的 ,如图
image
之前项目里的验证代码写的很凌乱，最近刚好遇到这个模块的功能需要重构，于是对代码做了大量的优化，记录一下如何利用策略模式优化表单验证的
优化前
之前我们的验证代码是这样写的，把验证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,
}]
以上就是我对表单验证规则的优化心得，有哪里需要改进的希望大家可以指点出来，相互交流
