コンテンツにスキップ

入力値検証⚓︎

フロントエンドのアーキテクチャに基づき、入力値検証には VeeValidate と yup を使用します。 また、入力値検証失敗時のメッセージを管理するために、 Vue I18n を使用します。 メッセージ管理機能の実装方法の詳細に関しては、こちら を確認してください。

必要なパッケージのインストール⚓︎

ターミナルを開き、対象プロジェクトのワークスペースフォルダーで以下のコマンドを実行します。

1
npm install vee-validate yup vue-i18n

メッセージの定義⚓︎

入力値検証失敗時のメッセージを定義するため、./src/locales フォルダーに JSON ファイルを作成し、以下のように記述します。 メッセージを多言語対応する場合には、それぞれの言語の JSON ファイルを作成し、各言語のメッセージをフォルダーで分割して管理します。

validationTextList_jp.json
1
2
3
4
{
  "email": "メールアドレスの形式で入力してください",
  "required": "値を入力してください"
}

入力値検証時の設定⚓︎

各言語設定に基づいた、入力値検証メッセージを読み込みます。 アーキテクチャ定義 では設定ファイルは ./src/config フォルダーに集約されるため、ファイル ./src/config/yup.config.ts を作成し、以下のように記述します。

yup.config.ts
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
import { i18n } from '@/locales/i18n';
import { setLocale } from 'yup';

export function configureYup(): void {
  const { t } = i18n.global;
  setLocale({
    mixed: {
      required: t('required'),
    },
    string: {
      email: t('email'),
    },
  });
}

作成したファイルを読み込むため、 入力値を検証する Vue ファイルのスクリプト構文に以下を記述します。

example.vue
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<script setup lang="ts">
import { configureYup } from '@/config/yup.config';

// yup設定の有効化
configureYup();

// フォーム固有のバリデーション定義
const formSchema = yup.object({
  email: ValidationItems().email.required(),
  password: yup.string().required(),
});
</script>

入力値検証の実行⚓︎

どのように入力値検証をコーディングするかは、公式ドキュメント を参照してください。