การตรวจสอบสคีมาด้วย Zod

ยินดีต้อนรับ

เหตุผลที่ควรใช้การตรวจสอบด้วยสคีมา

การติดตั้ง

npm install zod @hookform/resolvers

การกำหนดสคีมา Zod

import { z } from 'zod';

const loginSchema = z.object({
  email: z.string().email('Invalid email'),
  password: z.string().min(8, 'At least 8 characters'),
});

การอนุมานชนิดข้อมูล TypeScript

type LoginForm = z.infer<typeof loginSchema>;
// { email: string; password: string }

การเชื่อมต่อกับ useForm ผ่าน resolver

import { zodResolver } from '@hookform/resolvers/zod';

const { register, handleSubmit, formState } = useForm<LoginForm>({
  resolver: zodResolver(loginSchema),
});

ไม่ต้องใช้กฎแบบอินไลน์อีกต่อไป

<input {...register('email')} />
{errors.email && <p>{errors.email.message}</p>}

การตรวจสอบความถูกต้องของ Zod ขั้นสูง

const schema = z.object({
  url: z.string().url('Must be a valid URL'),
  confirmPassword: z.string(),
}).refine(
  data => data.password === data.confirmPassword,
  { message: 'Passwords must match', path: ['confirmPassword'] }
);

การตรวจสอบความถูกต้องระหว่างฟิลด์

const schema = z.object({
  start: z.string(),
  end: z.string(),
}).refine(d => d.end > d.start, {
  message: 'End must be after start',
  path: ['end'],
});

การใช้ Schema ร่วมกับระบบหลังบ้าน

// shared/schemas.ts
export const loginSchema = z.object({ ... });

// frontend — import and use as resolver
// backend — import and call .parse() on request body

ตรวจสอบความเข้าใจ

สรุปทบทวน

บทเรียนถัดไป