Zod: Validation error
Zodでバリデーションエラーが発生した場合の対処法
概要
Zodスキーマでデータバリデーションに失敗した場合のエラーハンドリング方法です。
エラーメッセージ
``` ZodError: [ { “path”: [“email”], “message”: “Invalid email”, “code”: “invalid_string” } ] ```
原因
- 型の不一致: 期待する型と異なるデータ
- 必須フィールドの欠落: requiredフィールドがない
- カスタムバリデーション失敗: refineやsuperRefineでのエラー
- ネストしたオブジェクトのエラー: 深い階層でのバリデーション失敗
解決策
1. safeParseを使用
```typescript import { z } from ‘zod’;
const userSchema = z.object({ name: z.string().min(1, “Name is required”), email: z.string().email(“Invalid email”), age: z.number().min(0).optional(), });
const result = userSchema.safeParse(data);
if (!result.success) { console.log(result.error.flatten()); // { fieldErrors: { email: [“Invalid email”] }, formErrors: [] } return { errors: result.error.flatten().fieldErrors }; }
// result.data は型安全 const user = result.data; ```
2. エラーメッセージをカスタマイズ
```typescript const schema = z.object({ email: z.string({ required_error: “メールアドレスは必須です”, invalid_type_error: “メールアドレスは文字列で入力してください”, }).email({ message: “有効なメールアドレスを入力してください” }),
password: z.string() .min(8, { message: “パスワードは8文字以上必要です” }) .regex(/[A-Z]/, { message: “大文字を含めてください” }), }); ```
3. カスタムバリデーション
```typescript const passwordSchema = z.object({ password: z.string(), confirmPassword: z.string(), }).refine((data) => data.password === data.confirmPassword, { message: “パスワードが一致しません”, path: [“confirmPassword”], }); ```
4. React Hook Formと統合
```typescript import { zodResolver } from ‘@hookform/resolvers/zod’; import { useForm } from ‘react-hook-form’;
const { register, handleSubmit, formState: { errors } } = useForm({ resolver: zodResolver(userSchema), });
// errorsはZodエラーがマッピングされる <input {…register(’email’)} /> {errors.email && {errors.email.message}} ```
5. 部分的なバリデーション
```typescript // 一部のフィールドのみ必須 const partialSchema = userSchema.partial(); const pickSchema = userSchema.pick({ email: true }); const omitSchema = userSchema.omit({ password: true }); ```
よくある間違い
- parseとsafeParseの使い分け
- optionalとnullableの違い
- transformでデータを変換後にバリデーション
関連エラー
関連エラー
JavaScript の他のエラー
この記事は役に立ちましたか?