React Academy · Lektion

Skemavalidering med Zod

Integrér @hookform/resolvers og Zod-skemaer for typesikker formularvalidering.

Lektion 3 af 413 trin

Skemavalidering med Zod er en gratis React Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i React Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. React Academy-kurset indeholder 4 lektioner i alt.

Velkommen

I denne lektion integrerer du React Hook Form med Zod-skemaer via @hookform/resolvers for at få typesikker validering med én fælles kilde til sandhed for både formularen og TypeScript-typerne.

Hvorfor skemavalidering?

Det bliver omstændeligt og svært at genbruge valideringsregler, der er defineret direkte i register(). Et Zod-skema definerer AL al validering ét sted, udleder automatisk TypeScript-typer og kan deles mellem frontend og backend.

Installation

Installer Zod og RHF-resolverpakken.

npm install zod @hookform/resolvers

Definition af et Zod-skema

Brug z.object() til at definere formularens struktur. Hvert felt bruger en Zod-type med kædede valideringsmetoder.

import { z } from 'zod';

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

Udledning af TypeScript-typer

Brug z.infer til automatisk at udlede TypeScript-typen fra dit Zod-skema. Der er ikke brug for en separat grænseflade.

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

Forbindelse til useForm via resolver

Send zodResolver(schema) til useForms resolver-indstilling. RHF bruger derefter Zod til at validere formularen i stedet for regler, der er defineret direkte i felterne.

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

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

Ikke flere direkte regler

Med zodResolver behøver du ikke længere sende regler til register(). Kald blot register('fieldName') uden et andet argument. Zod håndterer al validering.

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

Komplekse Zod-valideringer

Zod understøtter avancerede valideringer: url(), uuid(), regex(), refine() til brugerdefineret logik og superRefine() til validering på tværs af felter.

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

Validering på tværs af felter

Zods refine() eller superRefine() kan tilgå alle feltværdier, så du kan lave regler på tværs af felter, f.eks. at 'slutdatoen skal være efter startdatoen'.

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

Deling af skemaer med backend

I et full-stack TypeScript-projekt skal du eksportere Zod-skemaet fra et delt modul. Brug det både i React-formularen OG i din Node.js/Next.js-API-håndtering, så valideringen er ensartet.

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

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

Hurtigt tjek

Hvad er den største fordel ved at bruge z.infer som formularens type i TypeScript?

Besvar den i den interaktive lektion

Opsummering

Definér et Zod-skema, udled TypeScript-typen med z.infer, giv zodResolver til useForm, og fjern indlejrede valideringsregler. Brug refine() til validering på tværs af felter, og del skemaer mellem frontend og backend.

Næste lektion

Næste lektion: **Dynamiske felter med useFieldArray** — du vil tilføje, fjerne og omarrangere dynamiske formularfelter ved hjælp af useFieldArray-hooket.

Gratis at komme i gang

Lær React med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 88
Lektioner: 324

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Skemavalidering med Zod” gratis?

Ja — hele teksten til “Skemavalidering med Zod” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af React Academy-kurset, skal du opgradere til CoddyKit PRO. React Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Skemavalidering med Zod”?

Integrér @hookform/resolvers og Zod-skemaer for typesikker formularvalidering. Du øver dig i React Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på React Academy?

Der kræves ingen tidligere erfaring. React Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.

Hvor lang tid tager lektionen “Skemavalidering med Zod”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne React Academy-lektion?

Ja. Alle React Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til React Academy