React Academy · leksjon

Skjemavalidering med Zod

Integrer @hookform/resolvers og Zod-skjemaer for typesikker validering av skjemaer.

Leksjon 3 av 413 trinn

Skjemavalidering med Zod er en gratis leksjon i React Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Academy inneholder totalt 4 leksjoner.

Velkommen

I denne leksjonen skal du integrere React Hook Form med Zod-skjemaer via @hookform/resolvers for å få typesikker validering med én felles sannhetskilde for både skjemaet og TypeScript-typene.

Hvorfor skjemavalidering?

Det blir omfattende og vanskelig å gjenbruke når valideringsregler defineres direkte i register(). Et Zod-skjema definerer ALL validering på ett sted, utleder TypeScript-typer automatisk og kan deles mellom frontend og backend.

Installasjon

Installer Zod og RHF-resolverpakken.

npm install zod @hookform/resolvers

Definere et Zod-skjema

Bruk z.object() for å definere strukturen til skjemaet. Hvert felt bruker en Zod-type med kjedede valideringsmetoder.

import { z } from 'zod';

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

Utlede TypeScript-typer

Bruk z.infer for å utlede TypeScript-typen automatisk fra Zod-skjemaet. Du trenger ikke et separat grensesnitt.

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

Koble til useForm via resolver

Send zodResolver(schema) til resolver-alternativet i useForm. RHF bruker da Zod til å validere skjemaet i stedet for innebygde regler.

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

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

Ingen flere innebygde regler

Med zodResolver trenger du ikke lenger å sende regler til register(). Kall bare register('fieldName') uten et ekstra argument. Zod håndterer all validering.

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

Avanserte Zod-valideringer

Zod støtter kraftige valideringer: url(), uuid(), regex(), refine() for egendefinert logikk og superRefine() for validering på tvers av felt

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å tvers av felt

refine() eller superRefine() i Zod kan få tilgang til alle feltverdiene, slik at De kan lage regler på tvers av felt, for eksempel at «sluttdatoen må være etter 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 av skjemaer med backend

I et fullstack TypeScript-prosjekt eksporterer De Zod-skjemaet fra en delt modul. Bruk det både i React-skjemaet OG i Node.js/Next.js-API-handleren for å få konsistent validering

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

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

Kunnskapssjekk

Hva er den viktigste fordelen ved å bruke z.infer som skjematype i TypeScript?

Besvar den i den interaktive leksjonen

Oppsummering

Definer et Zod-skjema, utled TypeScript-typen med z.infer, send zodResolver til useForm, og fjern innebygde valideringsregler. Bruk refine() for validering på tvers av felt, og del skjemaer mellom frontend og backend

Neste

Neste leksjon: **Dynamiske felt med useFieldArray** — De skal legge til, fjerne og endre rekkefølgen på dynamiske skjemafelt ved hjelp av useFieldArray-hooken

Gratis å komme i gang

Lær deg React med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 88
Leksjoner: 324

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Skjemavalidering med Zod» gratis?

Ja – hele teksten i «Skjemavalidering med Zod» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av React Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i React Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Skjemavalidering med Zod»?

Integrer @hookform/resolvers og Zod-skjemaer for typesikker validering av skjemaer. Du øver på React Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med React Academy?

Ingen tidligere erfaring er nødvendig. React Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.

Hvor lang tid tar leksjonen «Skjemavalidering med Zod»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne React Academy-leksjonen?

Ja. Alle React Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til React Academy