背景
在做移动端项目开发的时候,经常会遇到各种表单验证,有时候不同的页面,验证规则是一样的 ,如图
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,
}]
以上就是我对表单验证规则的优化心得,有哪里需要改进的希望大家可以指点出来,相互交流
网友评论