vue.js表單驗證插件(vee-validate)的使用教程詳解
綜述
名稱：vee-validate
用途：簡單的 Vue.js 表單驗證插件
官網(wǎng)：地址
github:地址
特別提示
配合laravel使用特別好使 因為驗證規(guī)則和laravel后端的驗證規(guī)則一樣
插件既可以應用于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'” 字段驗證的規(guī)則，注意雙引號之內(nèi)必須有單引號，多個規(guī)則之間用 | 連接 |
errors.first(‘email') email字段驗證不通過時顯示相關聯(lián)的提示信息
驗證規(guī)則
進一步學習
本地化
使用本地化功能可以讓錯誤提示換成中文
單頁中使用
瀏覽器中使用
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 翻譯的內(nèi)容，其中attributes對象表示字段，messages對象表示提示信息
常用方法
出錯渲染
字段驗證不通過時渲染提示信息時使用
errors.first(‘field') 顯示字段field的第一個出錯信息 errors.collect(‘field') 顯示字段field的所有出錯信息 errors.has(‘field') 判斷fileds字段是否檢驗有誤 erros.all() 顯示所有的出錯信息 errors.any() 判斷是否有錯誤
手動檢驗
常用于數(shù)據(jù)提交（寫在vue的方法內(nèi)部）
this.$validator.validate(‘field'); 校驗單個字段 this.$validator.validateAll(); 表單整體校驗
代碼片段
this.$validator.validateAll().then(function(result) {
if (result) {
//成功操作
} else {
// 失敗操作
}
})
檢驗信息清除
常用于校驗成功后清除錯誤的提示信息
this.errors.clear();
總結
以上所述是小編給大家介紹的vue.js表單驗證插件(vee-validate)的使用教程詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
文章展示了基于Vue封裝的標準漏斗圖的代碼,包括權重算法、滾輪監(jiān)聽和點擊示例功能,旨在提供實用的圖表展示技巧2025-02-02
vue跳轉頁面并且實現(xiàn)參數(shù)傳遞接受示例
這篇文章主要為大家介紹了vue跳轉頁面并且實現(xiàn)參數(shù)傳遞接受示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
vue?內(nèi)置組件?component?的用法示例詳解
這篇文章主要介紹了vue內(nèi)置組件component的用法,本文給大家介紹了component內(nèi)置組件切換方法，通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
Vue3中的setup語法糖、computed函數(shù)、watch函數(shù)詳解
這篇文章主要介紹了Vue3中的setup語法糖、computed函數(shù)、watch函數(shù),本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
webpack+vue+express(hot)熱啟動調(diào)試簡單配置方法
今天小編就為大家分享一篇webpack+vue + express (hot) 熱啟動調(diào)試簡單配置方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue如何下載本地靜態(tài)資源static文件夾，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue2 自定義 動態(tài)組件的實現(xiàn)方法,需要的朋友可以參考下2017-06-06
這篇文章主要為大家詳細介紹了vue.js的安裝方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要為大家介紹了Backbone前端框架核心及源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
Vue3使用TypeIt實現(xiàn)文字打字機效果的代碼示例
在現(xiàn)代網(wǎng)頁設計中,文字打字機效果是一種非常流行的動畫效果,能夠吸引用戶的注意力并提升用戶體驗,本文將介紹如何在 Vue 3 中使用 TypeIt 庫實現(xiàn)文字打字機效果,并分享一些實用的技巧和示例,需要的朋友可以參考下2025-01-01