0Pricing
React Academy · Lección

Validación de esquemas con Zod

Integre @hookform/resolvers y esquemas de Zod para validar formularios con seguridad de tipos.

Validación de esquemas con Zod es una lección gratuita de React Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.

Bienvenida

En esta lección integrará React Hook Form con esquemas de Zod mediante @hookform/resolvers para obtener una validación con seguridad de tipos y una única fuente de verdad tanto para el formulario como para los tipos de TypeScript.

¿Por qué validar mediante un esquema?

Definir reglas de validación directamente en register() se vuelve tedioso y difícil de reutilizar. Un esquema de Zod define toda la validación en un solo lugar, infiere automáticamente los tipos de TypeScript y se puede compartir entre el frontend y el backend.

Instalación

Instale Zod y el paquete resolver de RHF.
npm install zod @hookform/resolvers

Definición de un esquema de Zod

Utilice z.object() para definir la estructura del formulario. Cada campo utiliza un tipo de Zod con métodos de validación encadenados.
import { z } from 'zod';

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

Inferencia de tipos de TypeScript

Utilice z.infer para derivar automáticamente el tipo de TypeScript a partir del esquema de Zod. No se necesita una interfaz independiente.
type LoginForm = z.infer<typeof loginSchema>;
// { email: string; password: string }

Conexión con useForm mediante resolver

Pase zodResolver(schema) a la opción resolver de useForm. RHF utilizará Zod para validar el formulario en lugar de reglas definidas directamente en los campos.
import { zodResolver } from '@hookform/resolvers/zod';

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

No más reglas definidas directamente en los campos

Con zodResolver, ya no necesita pasar reglas a register(). Solo tiene que llamar a register('fieldName') sin un segundo argumento. Zod gestiona toda la validación.
<input {...register('email')} />
{errors.email && <p>{errors.email.message}</p>}

Validaciones complejas con Zod

Zod admite validaciones potentes: url(), uuid(), regex(), refine() para lógica personalizada y superRefine() para validar varios campos relacionados.
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'] }
);

Validación entre campos

refine() o superRefine() de Zod pueden acceder a los valores de todos los campos, lo que permite establecer reglas entre campos, como «la fecha de finalización debe ser posterior a la fecha de inicio».
const schema = z.object({
  start: z.string(),
  end: z.string(),
}).refine(d => d.end > d.start, {
  message: 'End must be after start',
  path: ['end'],
});

Compartir esquemas con el backend

En un proyecto de TypeScript full stack, exporte el esquema de Zod desde un módulo compartido. Úselo tanto en el formulario de React como en el controlador de la API de Node.js/Next.js para mantener una validación coherente.
// shared/schemas.ts
export const loginSchema = z.object({ ... });

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

Comprobación rápida

¿Cuál es la principal ventaja de usar z.infer como tipo del formulario en TypeScript?

Repaso

Defina un esquema de Zod, infiera el tipo de TypeScript con z.infer, pase zodResolver a useForm y elimine las reglas de validación insertadas en línea. Use refine() para validar varios campos relacionados y comparta los esquemas entre el frontend y el backend.

A continuación

Siguiente lección: **Campos dinámicos con useFieldArray**: añadirá, eliminará y reordenará campos de formulario dinámicos mediante el hook useFieldArray.

Preguntas frecuentes

¿La lección «Validación de esquemas con Zod» es gratis?

Sí — el texto completo de «Validación de esquemas con Zod» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Validación de esquemas con Zod»?

Integre @hookform/resolvers y esquemas de Zod para validar formularios con seguridad de tipos. Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar React Academy?

No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «Validación de esquemas con Zod»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de React Academy?

Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Primeros pasos con React Hook Form
  2. Reglas de validación y mensajes de error
  3. Validación de esquemas con Zod
  4. Campos dinámicos con useFieldArray
← Volver a React Academy