Vue使用vee-validate驗證表單步驟詳解

這次帶給大家Vue使用vee-validate驗證表單步驟詳解，Vue使用vee-validate驗證表單的注意事項有哪些，以下就是實戰案例，一起來看一下。

Vue專案遇到要表單驗證了吧，對我來說表單驗證是個很糾(dan)結(teng)的內容，各種判斷凌亂到飛起。平常使用jquery的validate插件做表單驗證方便吧，你也可以在Vue裡引入jquery的validate插件(如何引入jquery在我上一篇博文有介紹，點擊查看)。但我們要做vue專案也，不到實在解決不了還是建議不要引入，因為Vue自己就有表單驗證的插件，那就是vee-validate。

我在這裡並不是詳細講解vee-validate的使用功能，只是快速了解如何在專案裡使用vee-validate，做專案時哪有那麼多時間讓你去熟悉一個插件，肯定先搞定了再說，具體熟悉掌握了解請自行查閱相關資料。

1.npm安裝vee-validate：npm install vee-validate --save --registry=<a href="http://www.php.cn/wiki/373.html" target="_blank">https://</a>registry.npm.taobao.org --verbose

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

#3.在你要進行表單驗證的input標籤加入相關的程式碼：

注意：

(1)errors印出來是這樣的：{ "item": [ { "id": "_9e6hk2qh2", "field": "email", "msg": "email 是必須的", "rule": "email", "scope": null } ] }，span標籤透過errors的幾個方法來進行顯示隱藏和提示錯誤，這裡列出幾個常用的errors方法： errors.first('field')：當前field的第一個錯誤訊息，字串errors .collect('field')：目前field的所有錯誤訊息，陣列列表errors.has('field')：目前filed是否有錯誤，布林值errors.all()：目前表單所有錯誤，陣列列表errors.any ()：目前表單是否有任何錯誤，布林值

(2)v-validate="'required | email'"有兩個驗證，一個是為空驗證，一個是輸入錯誤驗證，你想要多少種驗證就在這裡寫。例如你要限製字數，那就加多個max，即v-validate="'required | email | max:9'"。

(3)name屬性一定要寫，span標籤是顯示錯誤提示的。其實此時已經基本完成表單驗證了，只是出現的提示是插件提供的預設提示，例如email的錯誤提示如下圖所示，這肯定不是我們想要的，我們需要定義一下。

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

##效果如下：

其中field取得的是attributes中的email的value值，也就是'郵箱'。 vee-validate提供了一些規則，可以到vee-validate官網查看。

 5.接下來是重點：自訂規則。以下是自訂身分證號驗證的demo：

效果如下：

如果需求裡不需要多一個提示的標籤，只需要在錯誤驗證時顯示警示顏色，那可以透過在input標籤上寫:class="{error:error.has('idCard') }"來實作。至此已經可以滿足基本的驗證需求了，更多的vee-validate插件功能會在往後更新完善，希望對大家有幫助。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

jQuery實作模糊查詢步驟詳解

node Async/Await 非同步程式實作詳解

以上是Vue使用vee-validate驗證表單步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！