React Academy · Lekcja

Walidacja schematów za pomocą Zod

Integracja @hookform/resolvers i schematów Zod w celu zapewnienia bezpiecznej typowo walidacji formularzy.

Walidacja schematów za pomocą Zod to bezpłatna lekcja React Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 4 lekcji w sumie.

Wprowadzenie

W tej lekcji zintegrują Państwo React Hook Form ze schematami Zod za pośrednictwem @hookform/resolvers, aby uzyskać bezpieczną typowo walidację z jednym źródłem prawdy zarówno dla formularza, jak i typów TypeScript.

Dlaczego walidacja schematów?

Definiowanie reguł walidacji bezpośrednio w register() staje się rozwlekłe i trudne do ponownego użycia. Schemat Zod definiuje CAŁĄ walidację w jednym miejscu, automatycznie wyprowadza typy TypeScript i może być współdzielony między frontendem a backendem.

Instalacja

Proszę zainstalować Zod i pakiet resolvera RHF.

npm install zod @hookform/resolvers

Definiowanie schematu Zod

Proszę użyć z.object(), aby zdefiniować strukturę formularza. Każde pole korzysta z typu Zod z łańcuchem metod walidacji.

import { z } from 'zod';

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

Wyprowadzanie typów TypeScript

Proszę użyć z.infer, aby automatycznie wyprowadzić typ TypeScript ze schematu Zod. Nie jest potrzebny osobny interfejs.

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

Łączenie z useForm za pomocą resolvera

Proszę przekazać zodResolver(schema) do opcji resolver funkcji useForm. RHF będzie używać Zod do walidowania formularza zamiast reguł zdefiniowanych bezpośrednio w polach.

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

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

Koniec z regułami w polach

Dzięki zodResolver nie trzeba już przekazywać reguł do register(). Wystarczy wywołać register('fieldName') bez drugiego argumentu. Zod obsłuży całą walidację.

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

Złożone walidacje Zod

Zod obsługuje zaawansowane walidacje: url(), uuid(), regex(), refine() do niestandardowej logiki oraz superRefine() do walidacji między polami.

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

Walidacja między polami

refine() lub superRefine() w Zod może uzyskać dostęp do wartości wszystkich pól, co umożliwia definiowanie reguł między polami, takich jak „data końcowa musi przypadać po dacie początkowej”.

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

Współdzielenie schematów z backendem

W projekcie TypeScript full-stack eksportuj schemat Zod ze współdzielonego modułu. Używaj go zarówno w formularzu React, jak i w module obsługi API Node.js/Next.js, aby zapewnić spójną walidację.

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

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

Szybkie sprawdzenie

Jaka jest główna zaleta używania z.infer jako typu formularza w TypeScript?

Podsumowanie

Zdefiniuj schemat Zod, wywnioskuj typ TypeScript za pomocą z.infer, przekaż zodResolver do useForm i usuń wbudowane reguły walidacji. Używaj refine() do walidacji między polami i współdziel schematy między frontendem a backendem.

Dalej

Następna lekcja: **Dynamiczne pola z useFieldArray** — dodasz, usuniesz i zmienisz kolejność dynamicznych pól formularza za pomocą hooka useFieldArray.

Często zadawane pytania

Czy lekcja „Walidacja schematów za pomocą Zod” jest bezpłatna?

Tak — pełny tekst „Walidacja schematów za pomocą Zod” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Walidacja schematów za pomocą Zod”?

Integracja @hookform/resolvers i schematów Zod w celu zapewnienia bezpiecznej typowo walidacji formularzy. Ćwiczysz React Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć React Academy?

Nie wymagamy żadnego doświadczenia. React Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Walidacja schematów za pomocą Zod”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji React Academy?

Tak. Każda lekcja React Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do React Academy