---
title: "【Vue.js】VeeValidate 3.0 使用方法＆導入中文語系"
description: "VeeValidate 3.0 使用方法＆導入中文語系"
canonical_url: "https://hannoeru.me/posts/vue-js-veevalidate-3-chinese-language"
---

> Index of every page on this site: [llms.txt](https://hannoeru.me/llms.txt)

> **更新（2026）：** 本文針對 **VeeValidate 3 + Vue 2**。VeeValidate 4（Vue 3）的 API 已完全不同：`ValidationProvider`/`ValidationObserver` 已移除，改用 `<Form>`、`<Field>`、`<ErrorMessage>` 元件與 `useForm`/`useField` composables；多語系改由 [`@vee-validate/i18n`](https://vee-validate.logaretm.com/v4/guide/i18n/) 套件提供。以下內容保留作為歷史參考。

安裝套件：

```bash
npm install vee-validate
```

設定方法：

```js [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 />`

```html
<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 />` 都沒有錯誤才會放行

```html
<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>
```

## Sitemap

See the full [sitemap](https://hannoeru.me/sitemap.md) for all pages.