【Vue.js】VeeValidate 3.0 使用方法&導入中文語系

安裝方法:

main.js

import {
  ValidationObserver,
  ValidationProvider,
  extend,
  localize
} from "vee-validate";
import * as rules from "vee-validate/dist/rules";
import tw from "vee-validate/dist/locale/zh_TW.json";
 
// 安裝所有 VeeValidate 規則
Object.keys(rules).forEach(rule => {
  extend(rule, rules[rule]);
});
 
localize("zh_TW", tw);
 
// 註冊全域元件
Vue.component("ValidationObserver", ValidationObserver);
Vue.component("ValidationProvider", ValidationProvider);

使用方法:

局部驗證:<ValidationProvider />

<ValidationProvider
  name="Email" // 錯誤時顯示的名稱
  class="form-group"
  rules="required|email" // 規則條件
  v-slot="{ failed, errors }"
  tag="div"
>
  <label for="useremail">Email</label>
  <input
    type="email"
    class="form-control"
    :class="{ 'is-invalid': failed }" // 驗證失敗時套用
    name="email"
    id="useremail"
    v-model="form.user.email"
    placeholder="請輸入 Email"
    required
  />
  <span class="text-danger">{‌{ errors[0] }}</span>
</ValidationProvider>

全體驗證:<ValidationObserver />

驗證這個元件下所有的<ValidationProvider />都沒有錯誤才會放行

<ValidationObserver
  class="col-md-6"
  @submit.prevent="createOrder"
  v-slot="{ invalid }"
  tag="form"
>
  <!-- form... -->
  <!-- 沒通過驗證時保持 Button disabled 狀態 -->
  <button class="btn btn-danger" :disabled="invalid">送出訂單</button> 
</ValidationObserver>