簡單的 Vue.js 表單驗證外掛 (vee-validate) 使用總結

wmhello發表於2018-04-24
Vue.js

綜述

名稱：vee-validate
用途：簡單的 Vue.js 表單驗證外掛
官網：地址
github:地址

安裝

單頁安裝

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">{{ errors.first('email') }}</span>
    </p>
</div>

程式碼解析

v-validate="'required|email'"
v-validate 是由該外掛提供的指令 作用於html上
"'required|email'" 欄位驗證的規則，注意雙引號之內必須有單引號，多個規則之間用|連線
errors.has('email') 判斷emai欄位值是否驗證通過 email內容指向input的name屬性 必須設定成一樣 這意味著要用該外掛，input上的name屬性必須設定
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();

API進一步學習

參考文件

官網:地址
他人專案: Vue 全家桶 + 前端實現登入攔截、登出、校驗、購物車等功能

相關文章