0Pricing
React Academy · Lezione

Validazione degli schemi con Zod

Integri @hookform/resolvers e gli schemi Zod per una validazione dei form type-safe.

Validazione degli schemi con Zod è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.

Benvenuto

In questa lezione integrerà React Hook Form con gli schemi Zod tramite @hookform/resolvers, ottenendo una validazione sicura dal punto di vista dei tipi con un’unica fonte di verità sia per il modulo sia per i tipi TypeScript.

Perché usare la validazione con schema?

Definire le regole di validazione inline in register() diventa verboso e difficile da riutilizzare. Uno schema Zod definisce TUTTA la validazione in un unico punto, deduce automaticamente i tipi TypeScript e può essere condiviso tra frontend e backend.

Installazione

Installi Zod e il pacchetto resolver di RHF.
npm install zod @hookform/resolvers

Definizione di uno schema Zod

Utilizzi z.object() per definire la struttura del modulo. Ogni campo usa un tipo Zod con metodi di validazione concatenati.
import { z } from 'zod';

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

Deduzione dei tipi TypeScript

Utilizzi z.infer per derivare automaticamente il tipo TypeScript dallo schema Zod. Non è necessaria un’interfaccia separata.
type LoginForm = z.infer<typeof loginSchema>;
// { email: string; password: string }

Collegamento a useForm tramite resolver

Passi zodResolver(schema) all’opzione resolver di useForm. RHF utilizzerà Zod per convalidare il modulo invece delle regole inline.
import { zodResolver } from '@hookform/resolvers/zod';

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

Non più regole inline

Con zodResolver non è più necessario passare rules a register(). Chiami semplicemente register('fieldName') senza un secondo argomento. Zod gestisce tutta la validazione.
<input {...register('email')} />
{errors.email && <p>{errors.email.message}</p>}

Validazioni complesse con Zod

Zod supporta validazioni avanzate: url(), uuid(), regex(), refine() per la logica personalizzata e superRefine() per la validazione tra campi.
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'] }
);

Validazione tra campi

refine() o superRefine() di Zod possono accedere ai valori di tutti i campi, consentendo di definire regole tra campi, come «la data di fine deve essere successiva alla data di inizio».
const schema = z.object({
  start: z.string(),
  end: z.string(),
}).refine(d => d.end > d.start, {
  message: 'End must be after start',
  path: ['end'],
});

Condivisione degli schemi con il backend

In un progetto TypeScript full-stack, esporti lo schema Zod da un modulo condiviso. Lo utilizzi sia nel form React SIA nel gestore API Node.js/Next.js per ottenere una validazione coerente.
// shared/schemas.ts
export const loginSchema = z.object({ ... });

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

Verifica rapida

Qual è il vantaggio principale dell'utilizzo di z.infer per il tipo del form in TypeScript?

Riepilogo

Definisca uno schema Zod, ricavi il tipo TypeScript con z.infer, passi zodResolver a useForm e rimuova le regole di validazione inline. Utilizzi refine() per la validazione tra campi e condivida gli schemi tra frontend e backend.

Prossima lezione

Prossima lezione: **Campi dinamici con useFieldArray** — aggiungerà, rimuoverà e riordinerà i campi dinamici del form utilizzando l'hook useFieldArray.

Domande Frequenti

La lezione «Validazione degli schemi con Zod» è gratuita?

Sì — il testo completo di «Validazione degli schemi con Zod» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.

Cosa imparerò in «Validazione degli schemi con Zod»?

Integri @hookform/resolvers e gli schemi Zod per una validazione dei form type-safe. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare React Academy?

Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Validazione degli schemi con Zod»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione React Academy?

Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Introduzione a React Hook Form
  2. Regole di validazione e messaggi di errore
  3. Validazione degli schemi con Zod
  4. Campi dinamici con useFieldArray
← Torna a React Academy