Comment valider un tableau de chaînes à l'aide de Yup

Bonjour ! Dans ce didacticiel, vous apprendrez à valider un tableau de chaînes à l'aide de la bibliothèque de validation Yup. Tout d’abord, vous apprendrez à valider une chaîne, puis à l’appliquer à un tableau. J'ai récemment eu ce problème où le formulaire exige que chaque champ de saisie ne soit pas vide. Je vais partager dans ce tutoriel comment je l'ai fait.

Qu’est-ce que oui ?

Yup est une bibliothèque de validation d'exécution populaire, simple et open source pour JavaScript (et Typescript). Yup est une bibliothèque de validation de schéma JavaScript qui fournit un moyen de définir et de valider des schémas de données de manière déclarative et facile à utiliser. Il est couramment utilisé dans le développement front-end, en particulier avec les formulaires et la validation des entrées de données. Les développeurs peuvent créer des schémas de validation à l'aide de l'API de Yup, en spécifiant la forme et les contraintes des données qu'ils attendent.

Introduction

Supposons que vous implémentiez un formulaire dans lequel l'utilisateur peut saisir plusieurs e-mails. Vous devrez vérifier si chaque e-mail est valide, mais comment créer réellement un schéma où chaque e-mail est validé en tant qu'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? 
});

Comment valider les chaînes

Pour valider des chaînes en yup, vous devrez utiliser la fonction string(), et ce sont d'autres fonctions.

Par exemple, si vous avez besoin d'un e-mail valide, vous pouvez simplement utiliser 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 vous avez besoin d'un champ obligatoire, vous pouvez utiliser string().required().

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

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

C'est assez simple, appliquons-le maintenant aux tableaux.

Comment valider un tableau de chaînes dans Yup

Pour valider un tableau de chaînes en yup, vous devrez préciser le type de tableau que vous allez valider en utilisant la fonction array().of(). Par exemple :

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

Maintenant, lorsque nous essayons de le tester à nouveau en utilisant certaines données, nous obtenons les bons résultats :

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

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

Comment valider un tableau d'autres types

De même, vous pouvez utiliser la même technique si vous souhaitez valider un tableau de nombres ou n'importe quel type d'ailleurs. Par exemple :

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

C'est essentiellement ça !

Conclusion

Vous avez appris à valider un tableau de chaînes lors de l'utilisation de Yup. Vous avez également appris à valider des tableaux d'autres types et à créer des schémas de tableaux complexes à l'aide de la fonction array().of(). Tout ce que vous pouvez faire avec un seul objet, vous pouvez également le faire avec des tableaux.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!