【VeeValidate】バリデーションメッセージを日本語として表示する

「Vuejs」のプラグインとしてバリデーション処理を行うための「VeeValidate」があります。

このプラグインを使用することで簡単にバリデーション処理を行うことができるようになりますが、ロケール情報を指定しないとバリデーション処理後のメッセージは英字が表示されます。

今回は「VeeValidate」を使用して「日本語のメッセージを表示する」ことを目的とした方法の紹介をしていきます。

環境

  • Vue.js:v2.5.16
  • VeeValidate:2.0.0-rc.7

ロケール情報未設定

最初にロケール情報を設定していない状態の入力確認処理のサンプルを作成していきます。

作成したサンプルを元にして日本語を表示できるよう修正を加えていきます。

サンプルコード(ロケール情報未設定)

下のサンプルソースコードをコピーしてhtmlファイルとして保存して、ブラウザで表示して動作することを試してみてください。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>VeeValidate - 日本語表示</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/vee-validate.js"></script>
</head>
<body>
  <div id="app">
    <input type="text" name="name" v-validate="'required'">
    <span v-if="errors.has('name')">{{ errors.first('name') }}</span>
  </div>
  <script>
    Vue.use(VeeValidate);
    var app = new Vue({
      el: '#app',
      data() {
        return {
          name: ''
        }
      }
    });
  </script>
</body>
</html>

動作確認すると下記のようにバリデーションメッセージが英字で表示できていることを確認できます。

英字バリデーションメッセージの表示
英字バリデーションメッセージの表示

この状態から日本語メッセージを表示できるよう修正していきます。

日本語表示(一部問題あり)

次は、作成したサンプルを使用して日本語表示に変更してみます。

修正内容としては、「ロケール情報の設定」、「バリデーションメッセージ(日本語)の設定」になります。

ロケール情報設定

ロケール情報の設定は、「script」タグに以下の項目を追加します。

Vue.use(VeeValidate, {locale: 'ja'});

日本語メッセージ設定

日本語メッセージの設定は、「head」タグに以下の項目を追加します。

<script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/locale/ja.js"></script>

サンプルコード(一部問題あり)

最終的に完成したのが下のサンプルソースコードになります。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>VeeValidate - 日本語表示</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/vee-validate.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/locale/ja.js"></script>
</head>
<body>
  <div id="app">
    <input type="text" name="name" v-validate="'required'">
    <span v-if="errors.has('name')">{{ errors.first('name') }}</span>
  </div>
  <script>
    Vue.use(VeeValidate, {locale: 'ja'});
    var app = new Vue({
      el: '#app',
      data() {
        return {
          name: ''
        }
      }
    });
  </script>
</body>
</html>

動作確認するとバリデーションメッセージが日本語で表示できていることを確認できます。

ただし、まだ問題がある状態です。動作確認すると項目名が「input」タグの「name」の表示になっています。

日本語バリデーションメッセージの表示(問題あり)
日本語バリデーションメッセージの表示(問題あり)

日本語表示(完成版)

次は、日本語表示に一部問題がある状態のサンプルを使用して、項目名も日本語になるように修正します。修正内容としては、「別名を設定」になります。

別名設定

別名を設定するため、「input」タグに「data-vv-as="名称"」を追加します。

サンプルコード(完成版)

最終的に完成したのが下のサンプルソースコードになります。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>VeeValidate - 日本語表示</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/vee-validate.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/locale/ja.js"></script>
</head>
<body>
  <div id="app">
    <input type="text" name="name" v-validate="'required'" data-vv-as="名称">
    <span v-if="errors.has('name')">{{ errors.first('name') }}</span>
  </div>
  <script>
    Vue.use(VeeValidate, {
      locale: 'ja'
    });
    var app = new Vue({
      el: '#app',
      data() {
        return {
          name: ''
        }
      }
    });
  </script>
</body>
</html>

動作確認するとバリデーションメッセージとして項目名も含めて日本語で表示できていることを確認できます。

日本語バリデーションメッセージの表示(完成版)
日本語バリデーションメッセージの表示(完成版)

最後に

日本語以外のロケール情報を設定することでもできます。使用するロケールに合わせて変更してみてください。

あらかじめ用意されているロケール情報は「こちら」から確認できます。

knowledge
スポンサーリンク
fumidzuki