React Academy · Lektion

Schema-Validierung mit Zod

Integrieren Sie @hookform/resolvers und Zod-Schemas für eine typsichere Formularvalidierung.

Schema-Validierung mit Zod ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Willkommen

In dieser Lektion integrieren Sie React Hook Form über @hookform/resolvers mit Zod-Schemas, um typsichere Validierung mit einer einzigen Quelle der Wahrheit sowohl für das Formular als auch für die TypeScript-Typen zu erhalten.

Warum Schema-Validierung?

Wenn Sie Validierungsregeln direkt in register() definieren, werden sie umfangreich und lassen sich nur schwer wiederverwenden. Ein Zod-Schema definiert ALLE Validierungen an einer Stelle, leitet TypeScript-Typen automatisch ab und kann zwischen Frontend und Backend geteilt werden.

Installation

Installieren Sie Zod und das RHF-Resolver-Paket.

npm install zod @hookform/resolvers

Ein Zod-Schema definieren

Verwenden Sie z.object(), um die Struktur Ihres Formulars zu definieren. Für jedes Feld wird ein Zod-Typ mit verketteten Validierungsmethoden verwendet.

import { z } from 'zod';

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

TypeScript-Typen ableiten

Verwenden Sie z.infer, um den TypeScript-Typ automatisch aus Ihrem Zod-Schema abzuleiten. Eine separate Schnittstelle ist nicht erforderlich.

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

Über resolver mit useForm verbinden

Übergeben Sie zodResolver(schema) an die resolver-Option von useForm. RHF verwendet Zod dann zur Formularvalidierung anstelle von direkt definierten Regeln.

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

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

Keine direkt definierten Regeln mehr

Mit zodResolver müssen Sie register() keine rules mehr übergeben. Rufen Sie einfach register('fieldName') ohne ein zweites Argument auf. Zod übernimmt die gesamte Validierung.

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

Komplexe Zod-Validierungen

Zod unterstützt leistungsstarke Validierungen: url(), uuid(), regex(), refine() für benutzerdefinierte Logik und superRefine() für feldübergreifende Validierung.

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

Feldübergreifende Validierung

refine() und superRefine() von Zod können auf alle Feldwerte zugreifen. Dadurch sind Regeln wie „Das Enddatum muss nach dem Startdatum liegen“ möglich.

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

Schemata mit dem Backend teilen

Exportieren Sie in einem Full-Stack-TypeScript-Projekt das Zod-Schema aus einem gemeinsam genutzten Modul. Verwenden Sie es sowohl im React-Formular als auch in Ihrem Node.js-/Next.js-API-Handler, um eine konsistente Validierung sicherzustellen.

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

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

Kurzer Check

Was ist der Hauptvorteil, wenn Sie z.infer für den Formulartyp in TypeScript verwenden?

Zusammenfassung

Definieren Sie ein Zod-Schema, leiten Sie den TypeScript-Typ mit z.infer ab, übergeben Sie zodResolver an useForm und entfernen Sie die inline definierten Validierungsregeln. Verwenden Sie refine() für die feldübergreifende Validierung und teilen Sie Schemata zwischen Frontend und Backend.

Als Nächstes

Nächste Lektion: **Dynamische Felder mit useFieldArray** — Sie werden dynamische Formularfelder mithilfe des useFieldArray-Hooks hinzufügen, entfernen und neu anordnen.

Häufig gestellte Fragen

Ist die Lektion „Schema-Validierung mit Zod“ kostenlos?

Ja — der vollständige Text von „Schema-Validierung mit Zod“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Schema-Validierung mit Zod“?

Integrieren Sie @hookform/resolvers und Zod-Schemas für eine typsichere Formularvalidierung. Du übst React Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um React Academy zu starten?

Keine Vorkenntnisse erforderlich. React Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Schema-Validierung mit Zod“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser React Academy-Lektion Code schreiben und ausführen?

Ja. Jede React Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu React Academy