التحقق من المخطط باستخدام 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

تحقق سريع

مراجعة

التالي