這篇文章主要為大家展示了“vue.js表單驗(yàn)證插件vee-validate怎么用”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“vue.js表單驗(yàn)證插件vee-validate怎么用”這篇文章吧。

成都創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的烈山網(wǎng)站設(shè)計(jì)、移動媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

特別提示

配合laravel使用特別好使 因?yàn)轵?yàn)證規(guī)則和laravel后端的驗(yàn)證規(guī)則一樣

插件既可以應(yīng)用于SPA也可以應(yīng)用于多頁面，通用性強(qiáng)

安裝

單頁安裝

npm install vee-validate --save

瀏覽器安裝

 <!-- unpkg -->
 <script src="https://unpkg.com/vee-validate@2.0.0-rc.7"></script>

引入項(xiàng)目

單頁引入

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>

基礎(chǔ)使用

<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'” 字段驗(yàn)證的規(guī)則，注意雙引號之內(nèi)必須有單引號，多個規(guī)則之間用

連接

errors.first(‘email') email字段驗(yàn)證不通過時顯示相關(guān)聯(lián)的提示信息

驗(yàn)證規(guī)則

地址

進(jìn)一步學(xué)習(xí)

本地化

使用本地化功能可以讓錯誤提示換成中文

單頁中使用

瀏覽器中使用

var dict = {
 zh_CN: {
 messages: {
 required: function(field){
 return '請輸入' + field ;
 },
 confirmed: function(field) {
 return '兩次輸入的密碼不一致';
 }
 },
 attributes: {
 OldPassword: '舊密碼',
 NewPassword: '新密碼',
 ConfirmNewPassword: '確認(rèn)密碼',
 }
 }
};
VeeValidate.Validator.localize('zh_CN', dict.zh_CN);
Vue.use(VeeValidate);
var app = new Vue({
// 省略
});

代碼解析

VeeValidate（瀏覽器引入js后建立了一個全局對象）

dict 翻譯的內(nèi)容，其中attributes對象表示字段，messages對象表示提示信息

本地化進(jìn)一步參考

常用方法

出錯渲染

字段驗(yàn)證不通過時渲染提示信息時使用

errors.first(‘field') 顯示字段field的第一個出錯信息
errors.collect(‘field') 顯示字段field的所有出錯信息
errors.has(‘field') 判斷fileds字段是否檢驗(yàn)有誤
erros.all() 顯示所有的出錯信息
errors.any() 判斷是否有錯誤

手動檢驗(yàn)

常用于數(shù)據(jù)提交（寫在vue的方法內(nèi)部）

this.$validator.validate(‘field'); 校驗(yàn)單個字段
this.$validator.validateAll(); 表單整體校驗(yàn)

代碼片段

 this.$validator.validateAll().then(function(result) {
  if (result) {
  //成功操作
  } else {
  // 失敗操作
  }
 })

檢驗(yàn)信息清除

常用于校驗(yàn)成功后清除錯誤的提示信息

this.errors.clear();

以上是“vue.js表單驗(yàn)證插件vee-validate怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章標(biāo)題：vue.js表單驗(yàn)證插件vee-validate怎么用-創(chuàng)新互聯(lián)
網(wǎng)頁路徑：http://www.rwnh.cn/article22/cspejc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、移動網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、App開發(fā)、品牌網(wǎng)站制作、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)