ElementUI 的 Form 表单 具有表单验证功能，用来校验用户输入的表单内容。实际需求中表单验证项一般会比较复杂，所以需要给每个表单项增加 validator 自定义校验方法。
我们可以像官网示例一样把表单验证都写在组件的状态 data 函数中，但是这样就不好复用使用频率比较高的表单验证方法了，这时我们可以结合策略模式和函数柯里化的知识来重构一下。首先我们在项目的工具模块（一般是 utils 文件夹）实现通用的表单验证方法：
然后在 utils/index.js 中增加一个柯里化方法，用来生成表单验证函数：
上面的 formValidateGene 函数接受两个参数，第一个是验证规则，也就是 src/utils/validates.js 文件中提取出来的通用验证规则的方法名，第二个参数是报错的话表单验证的提示信息。
可以看见在使用的时候非常方便，把表单验证方法提取出来作为策略，使用柯里化方法动态选择表单验证方法，从而对策略灵活运用，大大加快开发效率。
代码实例可以参看 codesandbox - 策略模式表单验证实战
运行结果：
5. 策略模式的优缺点
策略模式将算法的 实现和使用拆分 ，这个特点带来了很多优点：
策略之间相互独立，但 策略可以自由切换 ，这个策略模式的特点给策略模式带来很多灵活性，也提高了策略的复用率；
如果不采用策略模式，那么在选策略时一般会采用多重的条件判断，采用策略模式可以 避免多重条件判断 ，增加可维护性；
可扩展性好，策略可以很方便的进行扩展；
策略模式的缺点：
策略相互独立，因此一些复杂的算法逻辑 无法共享 ，造成一些资源浪费；
如果用户想采用什么策略，必须了解策略的实现，因此 所有策略都需向外暴露 ，这是违背迪米特法则/最少知识原则的，也增加了用户对策略对象的使用成本。
6. 策略模式的适用场景
那么应该在什么场景下使用策略模式呢：
多个算法 只在行为上稍有不同 的场景，这时可以使用策略模式来动态选择算法；
算法 需要自由切换 的场景；
有时 需要多重条件判断 ，那么可以使用策略模式来规避多重条件判断的情况；
7. 其他相关模式
7.1 策略模式和模板方法模式
策略模式和模板方法模式的作用比较类似，但是结构和实现方式有点不一样。
策略模式让我们在程序运行的时候动态地指定要使用的算法；
模板方法模式是在子类定义的时候就已经确定了使用的算法；
7.2 策略模式和享元模式
总结
以上所述是小编给大家介绍的策略模式实现 Vue 动态表单验证的方法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
您可能感兴趣的文章: