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

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