フロントエンドの入力フォームのバリデーションを改善する

[KentaHizume]

概要

フロントエンドの入力フォームのバリデーションを改善する。
実装方針、実装例のバリエーション、ドキュメントについて不足している点を改善する。

詳細 / 機能詳細（オプション）

現在は、Dressca Consumerのログイン画面にのみ実装されており、
パターンは文字列、メールアドレス、必須の3つのみ。

const formSchema = yup.object({
  email: validationItems.email.required(),
  password: yup.string().required(),
});

方針

validation-items.tsで定義しているものと、各ViewModelで定義しているものがあるので、使い分けの指針が必要。
画面を開いた初期状態ではバリデーションメッセージが出ないが、出たほうがよいか？
メッセージはyup.config.tsで定義しているが、多言語対応を考えたときにここでよいか？

実装

買い物かご画面のアイテムの数量について、バリデーションが行われていないので実装をする。
ログイン画面のパスワードについて、必須チェックのみなのでパターンのチェックの実装をする。

ドキュメント

https://maris.alesinfiny.org/guidebooks/how-to-develop/vue-js/input-validation/#input-validation

入力値検証の実行について、公式ドキュメントへの参照のみで具体的な記述が不足しているので、追記したい。

完了条件

• 入力フォームのバリデーションが改善されていること
• 入力フォームにバリデーションが実装されていること
• ドキュメントが更新されていること

[KentaHizume]

Adminではカタログアイテムの名称、説明、単価、商品コードについて下記のようなバリデーションの実装を行っている。

https://vee-validate.logaretm.com/v4/guide/composition-api/typed-schema/

export const catalogItemSchema: TypedSchema = toTypedSchema(
  yup.object({
    name: yup
      .string()
      .required('アイテム名は必須です。')
      .max(256, '256文字以下で入力してください。'),
    description: yup
      .string()
      .required('説明は必須です。')
      .max(1024, '1024文字以下で入力してください。'),
    price: yup
      .number()
      .required('単価は必須です。')
      .typeError('数値で入力してください。')
      .integer('整数で入力してください。')
      .positive('正の数で入力してください。'),
    productCode: yup
      .string()
      .required('商品コードは必須です。')
      .max(128, '128文字以下で入力してください。')
      .matches(/^[0-9a-zA-Z]+$/, '半角英数字で入力してください。'),
  }),
);

[KentaHizume]

他のinput要素だと買い物かごの数量があるが、
input要素にtype="number"が指定されているので半角数字以外は入力できないようになっている。

[KentaHizume]

おそらく影響あり

• アプリケーションアーキテクチャ概要編にメッセージ管理方針を追記する maia#89

[KentaHizume]

Adminのサンプルだと、TypedSchemaのフィールドの名称を変更した場合にlintや型チェックで修正箇所が特定できないのでもっとよい実装方法があれば修正したい。