最近寫了一個(gè)vue的表單驗(yàn)證插件，第一次寫插件，其中的一些設(shè)計(jì)模式不夠優(yōu)化，產(chǎn)品邏輯不夠成熟，但作為自己的第一個(gè)完成的插件，寫完了還是覺得小有收獲的，特此記錄。
目標(biāo)
主要目標(biāo)：將需要綁定驗(yàn)證的表單元素根據(jù)綁定的規(guī)則進(jìn)行驗(yàn)證，驗(yàn)證通過則可進(jìn)行表單提交（規(guī)則通過后由用戶編寫通過后程序邏輯）
整體思路
具體思路
1.vue實(shí)例中自定義部分
表單驗(yàn)證主要需要三種信息：1.用戶自定義規(guī)則；2.提示信息；3.驗(yàn)證的時(shí)機(jī)
每條輸入的規(guī)則可能是多個(gè)的，對(duì)應(yīng)的提示信息也不相同，此處均供用戶自己填寫，形如：
<input type="text" id="test" v-vva:test="{length: /^.{5}$/, valid: /^\w+$/}" v-vva-msg="{length: '長度必須為五個(gè)字符', valid: '必須位有效字符'}">
<input type="button" v-vva-check value="校驗(yàn)">
下面參照vue自定義指令文檔說明來解釋一下：
v-vva為自定義指令，:test （arg）為驗(yàn)證規(guī)則名稱，每個(gè)實(shí)例中驗(yàn)證規(guī)則名稱必須確保唯一性，{length: /^.{5}$/, valid: /^\w+$/} （value）為用戶自定義的規(guī)則，其中屬性名代表用戶為每個(gè)規(guī)則添加的標(biāo)識(shí)，和v-vva-msg中相互對(duì)應(yīng)。v-vva-msg為用戶自定義的提示信息，根據(jù)不同的未成功校驗(yàn)的值顯示對(duì)應(yīng)的提示信息。
點(diǎn)擊含有v-vva-check指令的元素后將對(duì)每個(gè)添加有v-vva指令的元素進(jìn)行校驗(yàn)。校驗(yàn)通過后，會(huì)調(diào)用該vue實(shí)例的vva_submit()方法，如：
methods: {
vva_submit: function() {
alert('已經(jīng)成功通過校驗(yàn)')
}
}
實(shí)際上這地方我是想可以實(shí)現(xiàn)v-vva-check="fn"的形式，當(dāng)通過校驗(yàn)后調(diào)用fn，無奈作為vue小白一枚，這里的value出現(xiàn)問題，因此先采用這樣的權(quán)宜之計(jì)，以后再分析問題原因。
2.vva.js
vue文檔中說明，編寫vue插件需要提供install方法，因此主要在install中添加事件監(jiān)聽方法和自定義指令。
我想實(shí)現(xiàn)這種效果：點(diǎn)擊校驗(yàn)按鈕，未通過校驗(yàn)的輸入框均為紅框，提示消息出現(xiàn)在第一個(gè)紅框上，之后用戶每次更改輸入值均會(huì)進(jìn)行校驗(yàn)，提示消息始終出現(xiàn)在第一個(gè)未通過校驗(yàn)的輸入框中，若第一個(gè)輸入值已通過校驗(yàn)，提示消息會(huì)提示剩下未通過校驗(yàn)的第一個(gè)輸入框。
寫了幾天的代碼，今天回想起來，在vva.js中主要也就做了兩件事：
- 校驗(yàn)未通過則增加標(biāo)識(shí)類名
- 利用觀察者連接未通過的表單元素與提示消息框
剩下的也就是校驗(yàn)邏輯，何時(shí)生成消息、何時(shí)調(diào)用消息、何時(shí)摧毀消息，以及各個(gè)功能的細(xì)化拆分以及提升魯棒性。
反思一下，寫這樣的程序必須要對(duì)整個(gè)事件的流程和設(shè)計(jì)有一個(gè)清晰的規(guī)劃。這一點(diǎn)我開始沒有做好，繞了不少彎子。
3.tooltip.js
校驗(yàn)未通過后調(diào)用的氣泡工具，提供顯示、隱藏、生成、摧毀的功能。
項(xiàng)目地址參見Git
不滿意的地方：除了文中提到的通過校驗(yàn)后的調(diào)用方法外，vva.js和tooltip.js未做到完全分離，實(shí)際上vva.js應(yīng)該只做校驗(yàn)的事情，vva.js與tooltip.js之間的耦合的越少越好，然而在vva.js中出現(xiàn)了多次生成、摧毀冒泡的地方，這樣的方式不夠干凈。
