如何通过Vue混入mixin优化表单验证插件以提升代码复用性和可维护性？

本文共计1462个文字，预计阅读时间需要6分钟。

这段时期开始使用了这个表单校验插件，用起来比想象中麻烦，还有不少严重的缺陷。我最终还是抽空对这个插件进行了一些优化，虽然优化的方式和当初自己定的方向不太一样。

这段时间开发的时候使用到了这个表单校验插件，用起来比较麻烦就不说了，还有较严重的缺陷。自己最终还是抽空把这个插件进行了一些优化，虽然优化的方式和当初自己定下的方向不怎么相同，但是就使用体验上来说还是提高了很多。

1. 实际开发中遇到的问题

在上面的文章中提及了一些表单插件的问题，主要针对的是插件开发本身存在的问题。下面我总结下使用中存在的问题:

每个使用表单校验的元素都需要添加v-check 类名，比较麻烦。

必须在提交表单按钮上使用v-checkSubmit 指令进行表单校验，提交函数必须命名为submit() ，而且二者还是绑定的。

无法在一个组件里面多次使用校验函数，无法自定义校验的表单范围。（严重问题）

2. 对问题进行分析

一开始我的目标是按照之前计划的方向，研究如何使用事件订阅发布来实现表单校验，但是评估之后这种方式会对现有的代码改动较大，因为我项目已经几处用了当前的校验方法，遂放弃这个方向。

经过查阅资料和思考，我发现vue本身是没有直接处理、生成dom元素的api。所以当前的这种方法（根据校验结果添加类名input-error ，并追加错误信息元素）虽然不优雅，但是确实最简单有效的方式了。