Contáctanos
Webflow Premium Partner Ehab Fayez
Volver a Agent Skills
Seguridad y Calidad

Yup Schema Validation

Construye esquemas de validación expresivos con Yup para validación de formularios y parsing de datos en JavaScript.

Claude Code Cursor Copilot Windsurf

Descripción General

Yup es una biblioteca de validación de esquemas que proporciona una API fluida y encadenable para definir reglas de validación. Ha sido la biblioteca de validación predilecta para aplicaciones React, particularmente con la integración de la biblioteca de formularios Formik. Los esquemas Yup definen tanto la forma como las restricciones de validación de datos, con coerción de tipos integrada que convierte strings a números, fechas y booleanos automáticamente.

La biblioteca soporta validación condicional a través del método .when(), permitiendo que las reglas de validación dependan de valores de otros campos. Esto es particularmente útil para formularios complejos donde los requisitos de campos cambian según las selecciones del usuario. Yup también proporciona .test() para validación personalizada asíncrona, habilitando verificaciones contra APIs como validación de unicidad.

Los mensajes de error de Yup son personalizables tanto a nivel de esquema como globalmente. La biblioteca soporta localización a través de objetos locale personalizados, facilitando proporcionar mensajes de error en múltiples idiomas. Mientras es similar a Zod en propósito, Yup se enfoca en validación en tiempo de ejecución con coerción automática, haciéndolo particularmente adecuado para validación de formularios donde los valores de entrada comienzan como strings.

¿Para Quién Es?

  • Validar entradas de formulario con Formik y esquemas Yup
  • Definir reglas de validación condicional para formularios complejos
  • Validar datos de solicitud API con mensajes de error personalizados
  • Configurar mensajes de error de validación multilingües

Instalación

Configurar Claude Code
npm install yup

Configuración

import * as yup from "yup"

const schema = yup.object({
  name: yup.string().required("Name is required").min(2),
  email: yup.string().email("Invalid email").required(),
  age: yup.number().positive().integer().nullable(),
  website: yup.string().url().optional(),
  password: yup.string().min(8).required(),
  confirmPassword: yup.string()
    .oneOf([yup.ref("password")], "Passwords must match")
    .required(),
})

await schema.validate(formData, { abortEarly: false })