¡Hola! En este tutorial, aprenderá cómo validar una serie de cadenas usando la biblioteca de validación Yup. Primero, aprenderá cómo validar una cadena y luego aplicarla a una matriz. Recientemente tuve este problema donde el formulario requiere que cada campo de entrada no esté vacío. Compartiré en este tutorial cómo lo hice.

¿Qué es sí?

Sí, es una biblioteca de validación en tiempo de ejecución, popular, sencilla y de código abierto para JavaScript (y Typecript). Sí, es una biblioteca de validación de esquemas de JavaScript que proporciona una forma de definir y validar esquemas de datos de forma declarativa y fácil de usar. Se usa comúnmente en el desarrollo front-end, particularmente con formularios y validación de entrada de datos. Los desarrolladores pueden crear esquemas de validación utilizando la API de Yup, especificando la forma y las restricciones de los datos que esperan.

Introducción

Supongamos que está implementando un formulario donde el usuario puede ingresar varios correos electrónicos. Tendrás que verificar si cada correo electrónico es válido, pero ¿cómo se crea realmente un esquema en el que cada correo electrónico se valida como correo electrónico?

import { object, string, array } from 'yup'

const schema = object({
  emails: array() //how do you validate each email in the array as an actual email? 
});

Cómo validar cadenas

Para validar cadenas en sí, tendrás que usar la función string() y sus otras funciones.

Por ejemplo, si necesita un correo electrónico válido, puede usar string().email().

import { object, string, array } from 'yup'

const schema = object({
  email: string().email()
});

const isValid = schema.isValidSync({
    emails: ["", "@test.com"],
  });
console.log(isValid); //true which is wrong since they are clearly not emails

Si necesita un campo obligatorio, puede utilizar string().required().

import { object, string, array } from 'yup'

const schema = object({
  requiredField: string().required()
});

Esto es bastante simple, ahora apliquémoslo a matrices.

Cómo validar una matriz de cadenas en Yup

Para validar una matriz de cadenas en yup, tendrás que especificar el tipo de matriz que vas a validar usando la función array().of(). Por ejemplo:

import { object, string, array } from 'yup'

//1. create a simple validation schema for the string
const requiredEmail = string().email().required("Email is required");

//2. apply it to the array().of() function
const schema = object({
  emails: array().of(requiredEmail)
});

Ahora, cuando intentamos probarlo nuevamente usando algunos datos, obtenemos los resultados correctos:

let isValid = schema2.isValidSync({
  emails: ["", "@test.com"],
});
console.log(isValid); //false

isValid = schema2.isValidSync({
  emails: ["[email protected]", "[email protected]"],
});
console.log(isValid); //true

Cómo validar una matriz de otros tipos

De manera similar, puedes usar la misma técnica si deseas validar una matriz de números o cualquier tipo. Por ejemplo:

import { object, string, array, number, boolean } from "yup";

const requiredNumber = number().required();
const optionalBoolean = boolean().optional();
const user = object({
  firstName: string().required(),
  lastName: string().required(),
});
const schema3 = object({
  numbers: array().of(requiredNumber), // array of numbers
  booleans: array().of(optionalBoolean), //array of booleans
  users: array().of(user),  // array of objects
});

¡Eso es básicamente todo!

Conclusión

Aprendiste cómo validar una matriz de cadenas cuando usas Yup. También aprendió a validar matrices de otros tipos y a crear esquemas de matrices complejos utilizando la función array().of(). Todo lo que puedas hacer con un solo objeto, también puedes hacerlo con matrices.