Takumon Blog

Vuetify + VeeValidate + VueI18nでカスタムバリデーション作成時にロケールごとのエラーメッセージを設定する方法

2019/04/07
Vue.js
thumbnail

なにこれ

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に登録するロケールごとのメッセージ集に追加してあげることでメッセージが有効になります。
以上です🍅

  • なにこれ
  • 実装方法
  • このエントリーをはてなブックマークに追加

←前の記事

thumbnail

関連記事

thumbnail
thumbnail
thumbnail
thumbnail
thumbnail

最近の記事

thumbnail
thumbnail
thumbnail
thumbnail
thumbnail
記事一覧