Валидация схем с помощью 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'],
});

Совместное использование схем с серверной частью

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

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

Быстрая проверка

Итоги

Далее