【備忘録】 Vue.js + Zod でフォームを作る

はじめに

• Zodが便利そうだったのでソースコードを少し読んでZennに投稿した。
  • Zodのソースコードを少し読んでみた話
• VeeValidateなどがあるが、ライブラリを使わずにVue.jsとZodでフォームを作ってみた（素振り）。

作りたいもの

• フォームに入力する属性の仕様は以下の通り。
  1. 名前は2文字以上、10文字以下。
  2. メールアドレスはメールアドレスの仕様を満たしていること。
  3. 年齢は20歳から120歳まで。
• それぞれの属性を入力して、仕様を満たしていない場合はそれぞれの属性の横にエラー文言を表示する。
• 「保存」ボタンを押下して属性の全てが仕様を満たしていない場合は、「バリデーションエラー」と「保存」ボタンの横に表示する。

サンプルコード

• nameSchemaといった感じで、それぞれの属性ごとにバリデータを作成し、各属性に値を入力したときのバリデーションを行った。「保存」ボタンを押下したときのバリデーションはそれぞれの属性のバリデータを統合してuserSchemaとし、userSchemaでバリデーションを行った。

const nameSchema = z.string().min(2).max(10);
const emailSchema = z.string().email();
const ageSchema = z.number().min(20).max(120);

const userSchema = z.object({
  name: nameSchema,
  email: emailSchema,
  age: ageSchema
});

• @inputを使うと入力している途中でエラー文言が出てしまうので、@blurにしてフォーカスが外れた時に属性のバリデーションが実行されるようにした。

サンプルコード詳細（クリックすると展開されます）

おわりに

• Zodを使ってフォームのサンプルを作ることができた。
  • サンプルコードの方針や実装が正しいのかどこかで答え合わせしたい。
• 前に入力している途中でバリデーションのエラーメッセージが出て鬱陶しいなと思ったUIがあったのだが、@blur(フォーカスイベント)を使えば回避できることが分かった