學習目標：使用 vee-validate 進行表單驗證、多語系驗證訊息、客製化驗證等。
最近在整理一些 Vue 相關的常用到套件，表單驗證最多人使用的就是 vee-validate，它的優點如下：
- 不需搭配任何 UI 套件
- 快、全面、配置簡單
- 提供內置規則配套元件庫（require、email、min、max …. ）
- 提供 i18n 內置規則語言環境
- 可與 yup 驗證搭配使用
實作說明
- 建立一個表單進行以下欄位驗證：
- 必填欄位
- 信箱欄位
- 數字欄位
- 限制欄位最大長度
- 限制欄位最小長度
- 客製化驗證訊息
- 欄位即時驗證
環境說明
- vue（composition API）：
3.2.37 - vee-validate：
4.5.8 - @vee-validate/i18n：
4.6.6 - @vee-validate/rules：
4.6.6
前置作業
- 表單切版：提供給大家使用，原諒我太懶直接把 CSS 寫在上面
- 建立 vue 專案，安裝上述套件，並將表單切版放到 App.vue 並運行成功
操作開始
Step1. 建立 vee-validate 設定檔：Configuration
檔案路徑： src/main.js
- 設定欄位即時驗證：引入 configure 並更新配置
import { configure } from 'vee-validate'const config = configure({ validateOnInput: true, // 調整為即時驗證})app.use(config)
- 引入並定義內置規則庫：@vee-validate/rules 提供 25 種以上的規則，有兩種方式引入。
引入部分規則
import { defineRule } from 'vee-validate';import { required, email, min } from '@vee-validate/rules';defineRule('required', required);defineRule('email', email);defineRule('min', min);
引入全部規則
import { defineRule } from 'vee-validate'import AllRules from '@vee-validate/rules';Object.keys(AllRules).forEach(rule => { defineRule(rule, AllRules[rule]);});
Step2. 使用內建 Component Form、Field 取得欄位資料
檔案路徑：src/App.vue
- 引入 Form 組件：vee-validate 提供的組件剛好是大寫的「Form」，剛好跟 Html 中的 <form> 撞名，因此在引入時建議重新命名，以確保程式運行正確。
<script setup>import { Form as ValidationForm } from 'vee-validate';</script>
2. 將 <form> 替換成 <validation-form>
3. 引入 Field 組件，並將 <input/> 替換成 <field/>，若是 <select> 或 <textarea> 需要加上 as="select"、as="textarea"，才能顯示正確。
<script setup>import { Field } from 'vee-validate';</script>
4. 將 submit 綁定 method，接著試著按下送出按鈕，就會發現取到第一個欄位的資料了！確定取到欄位資料後就可以將剩下的欄位替換成 <Field/> ，（送出按鈕不用更換！）
Step3. 欄位新增驗證規則並顯示錯誤訊息
檔案路徑： src/App.vue
- Field Component 新增 rules 屬性：如果需要多個驗證規則，可使用 | 做串連 EX：
rules="required|alpha_dash" - Form Component 取出 errors
- 將錯誤訊息顯示於頁面中：會對應到 field name 的 value
- 利用 errors 是否有內容控制 style
完成了一個後就可以把其他欄位的都補上，可以使用的規則可參考官網
- nickname：
rules="required|alpha_dash" - email：
rules="required|email" - phone：
rules="required|numeric" - type：
rules="required" - media：
rules="required" - other：
rules="max:100"
Step4. 調整錯誤訊息
檔案路徑： src/main.js
我們可以利用 vee-validate 提供的 本地化 (i18n) 來進行轉換
- 配置全局錯誤訊息，利用 vee-validate 設定檔中的
generateMessage欄位搭配 i18n 相關函數進行配置，並在最後使用setLocale()設定環境語言
import { localize, setLocale } from '@vee-validate/i18n';import zh_TW from '@vee-validate/i18n/dist/locale/zh_TW.json';const config = configure({ generateMessage: localize({ zh_TW, }),})setLocale('zh_TW');
Step5. 客製化錯誤訊息
檔案路徑： src/main.js
由於預設本地化基本上都會加上欄位名稱在前方，但欄位名稱通常都還是英文，因此希望將基本的錯誤訊息進行覆寫，例如：必填驗證僅顯示「此欄位為必填」
覆寫的方式也相當簡單再次使用 localize()，針對語系進行設定就可以了（※須加在 configure 之後）
localize('zh_TW', { messages: { required: '此欄位為必填', },});
那通常我們就會將這部分獨立成一個檔案，後續也比較好維護
新增檔案：src/i18n/tw/validations.js
export default { messages: { // 覆寫原有 validator 錯誤訊息 _default: '格式不符', required: '此欄位為必填', email: '輸入格式錯誤' },}
引入 src/main.js
import twValidations from './i18n/tw/validations';localize('zh_TW', twValidations);
