👏
【vue3】Vuelidateで日本語を適応
目標
Vuelidateで設定したバリデーションのエラーメッセージを日本語にする
事前準備
vue3に事前準備uetify3が導入されたProject
記事では下記Git hub Repositoryを使用する
Vuelidateの導入
メッセージ一覧のプラグインを作成
バリデーションのメッセージは入力項目が設置されるたびに設定する必要があり特定のファイルに設定していくとメンテナンスが大変になるので一元管理を行います。
src/pluginディレクトリにvalidatorMessage.jsファイルを作成する
src/plugin/validatorMessage.js
// 必須
export const requiredMessage = (value) => `${value}は必須項目です`;
// メールアドレス
export const emailMessage = () => `メールアドレスの形式が正しくありません`;
// 最低文字数
export const minLengthMessage = (value, length) =>
`${value}は${length}文字以上必要です`;
対象項目を引数に渡し汎用性の高いメッセージの関数を作成する
メッセージプラグインをインポートする
バリデーションを設定しているファイルに上記で作成したメッセージプラグインをインポートする
サインイン/サインアップの画面で必要な関数を呼び出す
src/LoginView.vue
// バリデーションメッセージ
+import {
+ requiredMessage,
+ emailMessage,
+ minLengthMessage,
+} from "../plugins/validatorMessage";
Custom Validatorsを実行する
Custom Validatorsを行う事でエラーメッセージをカスタムすることができます
helpersをインポート
メッセージをカスタマイズするにはhelpersをインポートする必要があります
src/LoginView.vue
// Builtin
-import { email, required, minLength } from "@vuelidate/validators";
+import { email, required, minLength, helpers } from "@vuelidate/validators";
バリデーションルールの修正
バリデーションルールにカスタムを適応する
src/LoginView.vue
const rules = {
- email: { required, email },
+ email: {
+ required: helpers.withMessage(requiredMessage("メールアドレス"), required),
+ email: helpers.withMessage(emailMessage, email),
+ },
- password: { required, minLengthValue: minLength(8) },
+ password: {
+ required: helpers.withMessage(requiredMessage("パスワード"), required),
+ minLengthValue: helpers.withMessage(
+ minLengthMessage("パスワード", 8),
+ minLength(8)
+ ),
+ },
};
実行結果
Git commit情報
今回の修正は量が多いので全体を確認したい場合はcommit履歴を確認しましょう
| SHA | commit message |
|---|---|
| 646da6c | 【vue3】Vuelidateで日本語を適応 |
あとがき
Vuelidateで日本語を適応する方法はほとんどネットに記事がありませんでした。
公式のドキュメントを漁れば出てくるのですが、実装している人がいないと本当に日本語化できるかもわからずVuelidateの導入に少し後悔を感じているところでした
Discussion