綜述
名稱：vee-validate
用途：簡單的 Vue.js 表單驗證插件
官網：地址
github:地址
特別提示
配合laravel使用特別好使 因為驗證規則和laravel后端的驗證規則一樣
插件既可以應用于SPA也可以應用于多頁面，通用性強
安裝
單頁安裝
npm install vee-validate --save
瀏覽器安裝
<!-- unpkg --> <script src="https://unpkg.com/vee-validate@2.0.0-rc.7"></script>
引入項目
單頁引入
import Vue from 'vue';import VeeValidate from 'vee-validate';Vue.use(VeeValidate);
瀏覽器引入
<script src="path/to/vue.js"></script> <script src="https://unpkg.com/vee-validate@2.0.0-rc.7"></script> <script> Vue.use(VeeValidate); // good to go. </script>
基礎使用
<div class="column is-12"> <label class="label" for="email">Email</label> <p :class="{ 'control': true }"> <input v-validate="'required|email'" :class="{'input': true, 'is-danger': errors.has('email') }" name="email" type="text" placeholder="Email"> <span v-show="errors.has('email')" class="help is-danger"></span> </p></div>代碼解析
| v-validate=”‘required | email'” |
v-validate 是由該插件提供的指令 作用于html上
| “‘required | email'” 字段驗證的規則，注意雙引號之內必須有單引號，多個規則之間用 | 連接 |
errors.first(‘email') email字段驗證不通過時顯示相關聯的提示信息
驗證規則
進一步學習
本地化
使用本地化功能可以讓錯誤提示換成中文
單頁中使用
瀏覽器中使用
var dict = { zh_CN: { messages: { required: function(field){ return '請輸入' + field ; }, confirmed: function(field) { return '兩次輸入的密碼不一致'; } }, attributes: { OldPassword: '舊密碼', NewPassword: '新密碼', ConfirmNewPassword: '確認密碼', } }};VeeValidate.Validator.localize('zh_CN', dict.zh_CN);Vue.use(VeeValidate);var app = new Vue({// 省略});代碼解析
VeeValidate（瀏覽器引入js后建立了一個全局對象）
dict 翻譯的內容，其中attributes對象表示字段，messages對象表示提示信息
常用方法
出錯渲染
字段驗證不通過時渲染提示信息時使用
errors.first(‘field') 顯示字段field的第一個出錯信息errors.collect(‘field') 顯示字段field的所有出錯信息errors.has(‘field') 判斷fileds字段是否檢驗有誤erros.all() 顯示所有的出錯信息errors.any() 判斷是否有錯誤
手動檢驗
常用于數據提交（寫在vue的方法內部）
this.$validator.validate(‘field'); 校驗單個字段this.$validator.validateAll(); 表單整體校驗
代碼片段
this.$validator.validateAll().then(function(result) { if (result) { //成功操作 } else { // 失敗操作 } })檢驗信息清除
常用于校驗成功后清除錯誤的提示信息
this.errors.clear();
總結
以上所述是小編給大家介紹的vue.js表單驗證插件(vee-validate)的使用教程詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
