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 dans lequel 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 les chaînes, vous devrez utiliser la fonction string(), et ses 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 dans yup, vous devrez spécifier 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 résultats corrects :

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

isValid = schema2.isValidSync({
  emails: ["[email protected]", "[email protected]"],
});
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.