なにこれ
Vuetify + VeeValidateで入力チェックする際に、VueI18nを使ってエラーメッセージを多言語対応・共通化する場合に、カスタムバリデーションのエラーメッセージをロケールごとに設定する方法について紹介します。
実装方法
以前の記事「Vuetify + VeeValidate + VueI18nでエラーメッセージ共通化」 をベースにして、VeeValidateの定義方法を以下のようにします。 例ではMACアドレスのチェックを定義しています。
import Vue from 'vue';
import VeeValidate from 'vee-validate';
import ja from 'vee-validate/dist/locale/ja';
import en from 'vee-validate/dist/locale/en';
import { i18n } from './i18n';
// マックアドレスチェックconst MAC_ADDRESS = /^([0-9A-Fa-f]{2}[:-]){5}[0-9A-Fa-f]{2}$/;VeeValidate.Validator.extend('macaddress', { validate: value => MAC_ADDRESS.text(value),});
ja.messages.macaddress = field => `${field}の形式が正しくありません。`;en.messages.macaddress = field => `format of ${field} is not collect.`;
Vue.use(VeeValidate, {
i18n,
i18nRootKey: 'validations',
dictionary: {
ja,
en,
},
});重要なのはこの部分です。
import ja from 'vee-validate/dist/locale/ja';
import en from 'vee-validate/dist/locale/en';
ja.messages.macaddress = field => `${field}の形式が正しくありません。`;
en.messages.macaddress = field => `format of ${field} is not collect.`;
VeeValidateのカスタムバリデーションのメッセージは通常getMessageで定義します。
VeeValidate.Validator.extend('macaddress', {
getMessage: field => `${field}の形式が正しくありません。`,
validate: value => MAC_ADDRESS.text(value),
});ただVuetifyとi18nと合わせて使う場合は、getMessageではなく、dictionaryに登録するロケールごとのメッセージ集に追加してあげることでメッセージが有効になります。
以上です🍅
