最近写了一个vue的表单验证插件，第一次写插件，其中的一些设计模式不够优化，产品逻辑不够成熟，但作为自己的第一个完成的插件，写完了还是觉得小有收获的，特此记录。
目标
主要目标：将需要绑定验证的表单元素根据绑定的规则进行验证，验证通过则可进行表单提交（规则通过后由用户编写通过后程序逻辑）
整体思路
具体思路
1.vue实例中自定义部分
表单验证主要需要三种信息：1.用户自定义规则；2.提示信息；3.验证的时机
每条输入的规则可能是多个的，对应的提示信息也不相同，此处均供用户自己填写，形如：
<input type="text" id="test" v-vva:test="{length: /^.{5}$/, valid: /^\w+$/}" v-vva-msg="{length: '长度必须为五个字符', valid: '必须位有效字符'}">
<input type="button" v-vva-check value="校验">
下面参照vue自定义指令文档说明来解释一下：
v-vva为自定义指令，:test （arg）为验证规则名称，每个实例中验证规则名称必须确保唯一性，{length: /^.{5}$/, valid: /^\w+$/} （value）为用户自定义的规则，其中属性名代表用户为每个规则添加的标识，和v-vva-msg中相互对应。v-vva-msg为用户自定义的提示信息，根据不同的未成功校验的值显示对应的提示信息。
点击含有v-vva-check指令的元素后将对每个添加有v-vva指令的元素进行校验。校验通过后，会调用该vue实例的vva_submit()方法，如：
methods: {
vva_submit: function() {
alert('已经成功通过校验')
}
}
实际上这地方我是想可以实现v-vva-check="fn"的形式，当通过校验后调用fn，无奈作为vue小白一枚，这里的value出现问题，因此先采用这样的权宜之计，以后再分析问题原因。
2.vva.js
vue文档中说明，编写vue插件需要提供install方法，因此主要在install中添加事件监听方法和自定义指令。
我想实现这种效果：点击校验按钮，未通过校验的输入框均为红框，提示消息出现在第一个红框上，之后用户每次更改输入值均会进行校验，提示消息始终出现在第一个未通过校验的输入框中，若第一个输入值已通过校验，提示消息会提示剩下未通过校验的第一个输入框。
写了几天的代码，今天回想起来，在vva.js中主要也就做了两件事：
- 校验未通过则增加标识类名
- 利用观察者连接未通过的表单元素与提示消息框
剩下的也就是校验逻辑，何时生成消息、何时调用消息、何时摧毁消息，以及各个功能的细化拆分以及提升鲁棒性。
反思一下，写这样的程序必须要对整个事件的流程和设计有一个清晰的规划。这一点我开始没有做好，绕了不少弯子。
3.tooltip.js
校验未通过后调用的气泡工具，提供显示、隐藏、生成、摧毁的功能。
项目地址参见Git
不满意的地方：除了文中提到的通过校验后的调用方法外，vva.js和tooltip.js未做到完全分离，实际上vva.js应该只做校验的事情，vva.js与tooltip.js之间的耦合的越少越好，然而在vva.js中出现了多次生成、摧毁冒泡的地方，这样的方式不够干净。
网友评论