vue.js表單驗證插件vee-validate怎么用-創(chuàng)新互聯(lián)
這篇文章主要為大家展示了“vue.js表單驗證插件vee-validate怎么用”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“vue.js表單驗證插件vee-validate怎么用”這篇文章吧。
成都創(chuàng)新互聯(lián)公司堅持“要么做到，要么別承諾”的工作理念，服務領域包括：
成都網(wǎng)站設計、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務，滿足客戶于互聯(lián)網(wǎng)時代的
烈山網(wǎng)站設計、移動媒體設計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡建設合作伙伴！
特別提示
配合laravel使用特別好使 因為驗證規(guī)則和laravel后端的驗證規(guī)則一樣
插件既可以應用于SPA也可以應用于多頁面，通用性強
安裝
單頁安裝
npm install vee-validate --save
瀏覽器安裝
引入項目
單頁引入
import Vue from 'vue';
import VeeValidate from 'vee-validate';
Vue.use(VeeValidate);
瀏覽器引入
基礎使用
Email
代碼解析
| v-validate=”‘required | email'” |
v-validate 是由該插件提供的指令 作用于html上
| “‘required | email'” 字段驗證的規(guī)則，注意雙引號之內必須有單引號，多個規(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 翻譯的內容，其中attributes對象表示字段，messages對象表示提示信息
本地化進一步參考
常用方法
出錯渲染
字段驗證不通過時渲染提示信息時使用
errors.first(‘field') 顯示字段field的第一個出錯信息
errors.collect(‘field') 顯示字段field的所有出錯信息
errors.has(‘field') 判斷fileds字段是否檢驗有誤
erros.all() 顯示所有的出錯信息
errors.any() 判斷是否有錯誤
手動檢驗
常用于數(shù)據(jù)提交（寫在vue的方法內部）
this.$validator.validate(‘field'); 校驗單個字段
this.$validator.validateAll(); 表單整體校驗
代碼片段
this.$validator.validateAll().then(function(result) {
if (result) {
//成功操作
} else {
// 失敗操作
}
})檢驗信息清除
常用于校驗成功后清除錯誤的提示信息
this.errors.clear();
以上是“vue.js表單驗證插件vee-validate怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
網(wǎng)頁題目：vue.js表單驗證插件vee-validate怎么用-創(chuàng)新互聯(lián)
網(wǎng)頁網(wǎng)址：
http://weahome.cn/article/cspejc.html
重慶分公司
重慶分公司
