摘要 今天小编跟大家讲解下有关如何利用 策略模式 优化表单验证 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关如何利用 策略

今天小编跟大家讲解下有关如何利用 策略模式 优化表单验证 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关如何利用 策略模式 优化表单验证 的相关资料，希望小伙伴们看了有所帮助。

背景

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

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

优化前之前我们的验证代码是这样写的 把验证func写到一个公共模块里面 然后每个方法返回一个包含是否通过和message字段的对象//common.jsexport 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.jsexport default { validateName: function (data, msg = '') { if (!/xxx/.test(data)) { msg = '验证不通过提示语' } msg && alert(msg) return !!msg }, validatePhone: function (data, msg = '') {}, validateAddress: function (data, msg = '') {}}这样业务代码看上去很简洁//index.jsimport 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])})如果你的验证方法包含了很多本页面用不到的其他验证规则 你只需在业务代码添加一个白名单字段constwhiteList = ['validatePhone','validateName','validateAddress']如果你的验证有先后顺序 添加一个优先级字段const whiteList = [{ name:'validatePhone', level:1,},{ name:'validateName', level:2,}]

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

原文：https://segmentfault.com/a/1190000021855553

来源：爱蒂网