Zodバリデーションメモ

Zodとは

JavaScriptおよびTypeScript用のスキーマバリデーションライブラリ
公式ドキュメント

今回のバリデーション対応の具体例

案件を作成時に、単価下限、単価上限、単価備考のどれか一つに値が入力されていたらOK、入力がなければNGの処理を記述

create.tsx

import { z } from 'zod'

const schema = z.object({
  minPrice: z.number().optional(),
  maxPrice: z.number().optional(),
  note: z.string().optional(),
}).refine((data) => {
  const { minPrice, maxPrice, note } = data;
  const hasMinPrice = typeof minPrice === 'number' && !Number.isNaN(minPrice);
  const hasMaxPrice = typeof maxPrice === 'number' && !Number.isNaN(maxPrice);
  const hasNote = typeof note === 'string' && note !== '';
  return hasMinPrice || hasMaxPrice || hasNote;
}, {
  message: '単価下限、単価上限、備考のうちどれか1つを入力してください。',
  path: ['hasNote'],
});

// 使用例
const validData = {
  minPrice: 100,
  maxPrice: 200,
  note: '',
};
schema.parse(validData); // OK

const invalidData = {
  minPrice: undefined,
  maxPrice: null,
  note: '',
};
schema.parse(invalidData); // throws error

refine

refineは、オブジェクトのプロパティに対してチェック関数を定義し、エラーメッセージを設定することができます。
こちらを使用して
今回は３つある入力項目のうちいずれの項目も入力されなかった場合のバリデーション処理を書きました。

Zodのrefineメソッドを使用して、入力値のバリデーションをカスタマイズしています。refineは、オブジェクトのプロパティに対してチェック関数を定義し、エラーメッセージを設定することができます。
チェック関数は、オブジェクトのプロパティを受け取り、trueまたはfalseを返します。
今回は、hasMinPrice、hasMaxPrice、hasNoteというフラグを使用して、少なくとも1つのプロパティが入力されていることを確認しています。

path

こちらに指定されたプロパティが存在しない時は、エラーがスローされない。
なのでパス書くの忘れずに！