Validasi Skema dengan Zod

Selamat Datang

Mengapa Validasi Skema?

Pemasangan

npm install zod @hookform/resolvers

Mendefinisikan Skema Zod

import { z } from 'zod';

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

Menyimpulkan Tipe TypeScript

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

Menghubungkan ke useForm melalui Penyelesai

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

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

Tanpa Aturan Sebaris

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

Validasi Zod Kompleks

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'] }
);

Validasi Lintas Kolom

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

Berbagi Skema dengan Sisi Server

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

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

Pemeriksaan Singkat

Ringkasan

Berikutnya