Привет! В этом уроке вы узнаете, как проверить массив строк с помощью библиотеки проверки Yup. Сначала вы узнаете, как проверить строку, а затем применить ее к массиву. Недавно у меня возникла проблема: форма требует, чтобы каждое поле ввода не было пустым. В этом уроке я расскажу, как я это сделал.

Что такое Ага?

Да — это популярная, простая библиотека проверки времени выполнения с открытым исходным кодом для JavaScript (и Typescript). Да, это библиотека проверки схем JavaScript, которая позволяет определять и проверять схемы данных декларативным и простым в использовании способом. Он обычно используется во внешней разработке, особенно при проверке форм и ввода данных. Разработчики могут создавать схемы проверки с помощью API Yup, определяя форму и ограничения ожидаемых данных.

Введение

Предположим, вы реализуете форму, в которой пользователь может ввести несколько адресов электронной почты. Вам нужно будет проверить, является ли каждое электронное письмо действительным, но как на самом деле создать схему, в которой каждое электронное письмо будет проверено как электронное письмо?

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

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

Как проверять строки

Чтобы проверить строки в да, вам придется использовать функцию string() и другие ее функции.

Например, если вам нужен действительный адрес электронной почты, вы можете просто использовать 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

Если вам нужно обязательное поле, вы можете использовать string().required().

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

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

Это достаточно просто, теперь давайте применим это к массивам.

Как проверить массив строк в Yup

Чтобы проверить массив строк в yup, вам нужно будет указать тип массива, который вы собираетесь проверять, с помощью функции array().of(). Например:

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

Теперь, когда мы пытаемся протестировать его еще раз, используя некоторые данные, мы получаем правильные результаты:

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

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

Как проверить массив других типов

Аналогично, вы можете использовать тот же метод, если хотите проверить массив чисел или любой тип. Например:

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

Вот и все!

Заключение

Вы узнали, как проверять массив строк при использовании Yup. Вы также узнали, как проверять массивы других типов и создавать сложные схемы массивов с помощью функции array().of(). Все, что вы можете сделать с одним объектом, вы можете сделать и с массивами.