Olá! Neste tutorial, você aprenderá como validar um array de strings usando a biblioteca de validação Yup. Primeiro, você aprenderá como validar uma string e depois aplicá-la a um array. Recentemente tive esse problema em que o formulário exige que cada campo de entrada não esteja vazio. Vou compartilhar neste tutorial como fiz isso.

O que é Sim?

Sim, é uma biblioteca de validação em tempo de execução popular, simples e de código aberto para JavaScript (e Typescript). Yup é uma biblioteca de validação de esquema JavaScript que fornece uma maneira de definir e validar esquemas de dados de maneira declarativa e fácil de usar. É comumente usado no desenvolvimento front-end, principalmente com formulários e validação de entrada de dados. Os desenvolvedores podem criar esquemas de validação usando a API do Yup, especificando a forma e as restrições dos dados que esperam.

Introdução

Suponha que você esteja implementando um formulário onde o usuário pode inserir vários e-mails. Você terá que verificar se cada e-mail é válido, mas como você realmente cria um esquema onde cada e-mail é validado como um e-mail?

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

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

Como validar strings

Para validar strings sim, você terá que usar a função string() e suas outras funções.

Por exemplo, se você precisar de um e-mail válido, basta 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

Se precisar de um campo obrigatório, você pode usar string().required().

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

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

Isso é bastante simples, agora vamos aplicá-lo a arrays.

Como validar um array de strings no Yup

Para validar um array de strings no yup, você terá que especificar o tipo de array que irá validar usando a função array().of(). Por exemplo:

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

Agora, quando tentamos testá-lo novamente usando alguns dados, obtemos os resultados corretos:

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

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

Como validar uma matriz de outros tipos

Da mesma forma, você pode usar a mesma técnica se quiser validar uma matriz de números ou qualquer tipo. Por exemplo:

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

É basicamente isso!

Conclusão

Você aprendeu como validar array de strings ao usar o Yup. Você também aprendeu como validar arrays de outros tipos e criar esquemas de array complexos usando a função array().of(). Tudo o que você pode fazer com um único objeto, também pode fazer com arrays.