Vue項(xiàng)目遇到要表單驗(yàn)證了吧，對(duì)我來說表單驗(yàn)證是個(gè)很糾(dan)結(jié)(teng)的內(nèi)容，各種判斷凌亂到飛起。往常使用jquery的validate插件做表單驗(yàn)證方便吧，你也可以在Vue里引入jquery的validate插件(如何引入jquery在我上一篇博文有介紹，點(diǎn)擊查看)。但是我們是做vue項(xiàng)目也，不到實(shí)在解決不了還是建議不要引入，因?yàn)閂ue自己就有表單驗(yàn)證的插件，那就是vee-validate。

我在這并不是詳細(xì)講解vee-validate的使用功能，只是快速了解如何在項(xiàng)目里使用vee-validate，做項(xiàng)目時(shí)哪有那么多時(shí)間讓你去熟悉一個(gè)插件，肯定先搞定了再說，具體熟悉掌握了解請(qǐng)自行查閱相關(guān)資料。

1.npm安裝vee-validate：npm install vee-validate --save --registry=https://registry.npm.taobao.org --verbose

2.安裝成功后在main.js中引入：

3.在你要進(jìn)行表單驗(yàn)證的input標(biāo)簽加入相關(guān)的代碼：

注意：

(1)errors打印出來是這樣的：{ "item": [ { "id": "_9e6hk2qh2", "field": "email", "msg": "email 是必須的", "rule": "email", "scope": null } ] }，span標(biāo)簽通過errors的幾個(gè)方法來進(jìn)行顯示隱藏和提示錯(cuò)誤，這里列出幾個(gè)常用的errors方法： errors.first('field')：當(dāng)前field的第一個(gè)錯(cuò)誤信息，字符串 errors.collect('field')：當(dāng)前field的所有錯(cuò)誤信息，數(shù)組列表 errors.has('field')：當(dāng)前filed是否有錯(cuò)誤，布爾值 errors.all()：當(dāng)前表單所有錯(cuò)誤，數(shù)組列表 errors.any()：當(dāng)前表單是否有任何錯(cuò)誤，布爾值

(2)v-validate="'required | email'"有兩個(gè)驗(yàn)證，一個(gè)是為空驗(yàn)證，一個(gè)是輸入錯(cuò)誤驗(yàn)證，你想要多少種驗(yàn)證就在這里寫。比如你要限制字?jǐn)?shù)，那就加多個(gè)max，即v-validate="'required | email | max:9'"。

(3)name屬性一定要寫，span標(biāo)簽是展示錯(cuò)誤提示的。其實(shí)此時(shí)已經(jīng)基本完成表單驗(yàn)證了，只是出現(xiàn)的提示是插件提供的默認(rèn)提示，比如email的錯(cuò)誤提示如下圖所示，這肯定不是我們想要的，我們需要定義一下。

4.定義成我們需要的文字提示：

效果如下：

其中field獲取的是attributes中的email的value值，也就是'郵箱'。vee-validate提供了一些規(guī)則，具體可以去vee-validate官網(wǎng)查看。

 5.接下來是重點(diǎn)：自定義規(guī)則。以下是自定義身份證號(hào)驗(yàn)證的demo：

效果如下：

如果需求里不需要多一個(gè)提示的標(biāo)簽，只需要在錯(cuò)誤驗(yàn)證時(shí)顯示警示顏色，那可以通過在input標(biāo)簽上寫:class="{error:error.has('idCard')}"來實(shí)現(xiàn)。至此已經(jīng)可以滿足基本的驗(yàn)證需求了，更多的vee-validate插件功能會(huì)在往后更新完善，希望對(duì)大家有幫助。

總結(jié)

以上所述是小編給大家介紹的Vue中使用vee-validate表單驗(yàn)證的方法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論