入力値検証⚓︎

フロントエンドのアーキテクチャに基づき、入力値検証には VeeValidate と yup を使用します。

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

ターミナルを開き、以下のコマンドを実行します。

1

npm install vee-validate yup

入力値検証時の設定⚓︎

yup のデフォルトのメッセージは英語であるため、日本語のメッセージを設定します。アーキテクチャ定義 では設定ファイルは ./src/config フォルダーに集約されるため、ファイル ./src/config/yup.config.ts を作成し、以下のように記述します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

import { setLocale } from 'yup';

setLocale({
  mixed: {
    required: '値を入力してください',
  },
  string: {
    email: 'メールアドレスの形式で入力してください',
  },
});

作成したファイルを読み込むため、 main.ts に import を記述します。

1

import '@/config/yup.config';

入力値検証の実行⚓︎

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