最近寫了一個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中出現了多次生成、摧毀冒泡的地方，這樣的方式不夠干凈。
