【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>