最近寫了一個(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)證通過(guò)則可進(jìn)行表單提交（規(guī)則通過(guò)后由用戶編寫通過(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: '長(zhǎng)度必須為五個(gè)字符', valid: '必須位有效字符'}">
<input type="button" v-vva-check value="校驗(yàn)">
下面參照vue自定義指令文檔說(shuō)明來(lái)解釋一下：
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)通過(guò)后网持，會(huì)調(diào)用該vue實(shí)例的vva_submit()方法，如：
methods: {
vva_submit: function() {
alert('已經(jīng)成功通過(guò)校驗(yàn)')
}
}
實(shí)際上這地方我是想可以實(shí)現(xiàn)v-vva-check="fn"的形式长踊，當(dāng)通過(guò)校驗(yàn)后調(diào)用fn，無(wú)奈作為vue小白一枚萍倡，這里的value出現(xiàn)問題身弊，因此先采用這樣的權(quán)宜之計(jì)，以后再分析問題原因。
2.vva.js
vue文檔中說(shuō)明阱佛，編寫vue插件需要提供install方法帖汞，因此主要在install中添加事件監(jiān)聽方法和自定義指令。
我想實(shí)現(xiàn)這種效果：點(diǎn)擊校驗(yàn)按鈕凑术，未通過(guò)校驗(yàn)的輸入框均為紅框翩蘸，提示消息出現(xiàn)在第一個(gè)紅框上，之后用戶每次更改輸入值均會(huì)進(jìn)行校驗(yàn)淮逊，提示消息始終出現(xiàn)在第一個(gè)未通過(guò)校驗(yàn)的輸入框中催首，若第一個(gè)輸入值已通過(guò)校驗(yàn)，提示消息會(huì)提示剩下未通過(guò)校驗(yàn)的第一個(gè)輸入框泄鹏。
寫了幾天的代碼郎任，今天回想起來(lái)，在vva.js中主要也就做了兩件事：
- 校驗(yàn)未通過(guò)則增加標(biāo)識(shí)類名
- 利用觀察者連接未通過(guò)的表單元素與提示消息框
剩下的也就是校驗(yàn)邏輯备籽，何時(shí)生成消息舶治、何時(shí)調(diào)用消息、何時(shí)摧毀消息车猬，以及各個(gè)功能的細(xì)化拆分以及提升魯棒性霉猛。
反思一下，寫這樣的程序必須要對(duì)整個(gè)事件的流程和設(shè)計(jì)有一個(gè)清晰的規(guī)劃珠闰。這一點(diǎn)我開始沒有做好惜浅，繞了不少?gòu)澴印?/p>
3.tooltip.js
校驗(yàn)未通過(guò)后調(diào)用的氣泡工具，提供顯示铸磅、隱藏赡矢、生成、摧毀的功能阅仔。
項(xiàng)目地址參見Git
不滿意的地方：除了文中提到的通過(guò)校驗(yàn)后的調(diào)用方法外吹散，vva.js和tooltip.js未做到完全分離，實(shí)際上vva.js應(yīng)該只做校驗(yàn)的事情八酒，vva.js與tooltip.js之間的耦合的越少越好空民，然而在vva.js中出現(xiàn)了多次生成、摧毀冒泡的地方羞迷，這樣的方式不夠干凈界轩。
