Vue如何使用vee-validate表單驗證
阿新 • • 發佈：2017-09-29
jquery error 信息 photo .html input 數組 file valid
1.npm安裝vee-validate：npm install vee-validate --save --registry=https://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插件功能會在往後更新完善，希望對大家有幫助。 如需轉載請註明出處：http://www.cnblogs.com/zishang91/p/7609460.html，以便有錯誤可以及時修改，若有錯漏不足之處，請見諒並且指點，謝謝！！！
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=https://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插件功能會在往後更新完善，希望對大家有幫助。 如需轉載請註明出處：http://www.cnblogs.com/zishang91/p/7609460.html，以便有錯誤可以及時修改，若有錯漏不足之處，請見諒並且指點，謝謝！！！
Vue如何使用vee-validate表單驗證