Vue3 VeeValidate v4.x 進階 - 客製化錯誤訊息

前言

這一篇算是延續了前一篇「Vue3 VeeValidate v4.x 引入教學」的文章，算是介紹該如何客製化 VeeValidate 的錯誤訊息，因為有時候我們實戰開發上是需要客製 VeeValidate 的錯誤訊息的，所以這一篇就來記錄一下。

VeeValidate v4.x 環境

首先這邊先提一下環境，我這邊主要是使用 Vite Vue3 建立的，所以你可以參考 Vue3 VeeValidate v4.x 引入教學

如果你的很懶的話，我這邊也有提供範本可以給你參考。

VeeValidate-Example

客製化錯誤訊息

接下來我們即將進入正題，我們目前的錯誤訊息畫面如下：

電子信箱 須為有效的電子信箱

雖然看起來是沒什麼太大的問題，但是有時候我們會需要客製化這一段訊息，例如變成：

電子信箱欄位必須為一個有效的電子信箱，並且只限制於 Gmail.com

而這個客製化錯訊息的方式，其實是必須要搭配 i18n 的方式來做，所以我們可以在 Vee Validate 的官方文件中找到「Custom messages for specific fields」這個章節，而這個章節的內容如下：

import { localize } from '@vee-validate/i18n';

localize('en', {
  fields: {
    password: {
      required: 'Hey! Password cannot be empty',
    },
  },
});

// Or update multiple languages
localize({
  en: {
    fields: {
      password: {
        required: 'Hey! Password cannot be empty',
      },
    },
  },
});

我們的核心重點就是 fields 屬性。

而我們可以在 src 目錄下新增一個 fields 的資料夾，並且在裡面新增一個 zh_TW.js 的檔案，並且在裡面新增以下的內容：

{
  "account": {
    "email": "帳號欄位必須為一個有效的電子信箱，並且只限制於 Gmail.com"
  }
}

接著修改 src/main.js 的內容，將原本的程式碼：

// 將當前 VeeValidate 的語系設定為繁體中文
configure({
  generateMessage: localize({ zh_TW: zhTW }),
  validateOnInput: true,
});
setLocale('zh_TW');

修改成：

// Custom Fields
import fields from './fields/zh_TW.json';

// ... 略過
configure({
  generateMessage: localize({
    zh_TW: {
      fields,
      messages: zhTW.messages,
    },
  }),
  validateOnInput: true,
});
setLocale('zh_TW');

// ... 略過

最後為了比較好看出差異，所以我將 App.vue 修改成了以下

<script setup>

</script>

<template>
  <VForm>
    <VField
      label="帳號"
      name="account"
      type="email"
      rules="email"
    />
    <ErrorMessage name="account"/>
  </VForm>
</template>

<style scoped>

</style>

這樣子就可以正常呈現你想要的錯誤訊息了

那麼 Vee Validate 是怎麼做到的呢？首先有幾個地方，我們會需要使用 i18n 的 fields 的屬性，接著這個屬性會去搭配對應我們的 VField 的 name 屬性，如果有對應上，就會優先使用 fields 的屬性，而不會使用 rules 的屬性，所以就會跑出客製化訊息，而如果沒有對應上，就會使用 rules 的屬性，所以就會跑出預設的錯誤訊息。

vee-validate v4.6.xx 版本

這邊我有件事情想提一下，我記得前陣子測試使用 Vee Validate 的這幾個版本時…

"@vee-validate/i18n": "4.6.10",
"@vee-validate/rules": "4.6.10",
"vee-validate": "4.6.10",

原本 VField 對應的不是 name 而是 label 屬性，因此如果你的版本比較舊的話，你就要把 fields 的內容改成以下才對

{
  "帳號": {
    "email": "帳號欄位必須為一個有效的電子信箱，並且只限制於 Gmail.com"
  }
}

這部分是我撰寫這一篇時才發現的，所以也就順便補充上來，希望對於想客製化訊息的人有幫助哩。