Validation Typescript en utilisant hapi joi

Joi est une bibliothèque de validation qui vous permet de créer des schémas pour valider des objets JavaScript. Et ce que cela signifie généralement pour moi, c’est que Joi fournit des méthodes pour valider facilement les types de données courants, tels que les adresses e-mail et les numéros de téléphone.

Mais j’ai également appris que cela vous permet de valider facilement des données moins courantes et des structures de données complexes.

Mise en place

Pour ce projet,  la validation devait se produire sur le front-end du navigateur.
Pour cette raison, j’ai exploité à la fois Joi et Joi-Browser .

yarn add joi --dev && yarn add joi-browser --dev

Avec les bibliothèques installées, Joi peut être importé dans votre fichier de validation et l’écriture des schémas peut commencer.

import * en tant que Joi depuis 'joi-browser';

Lors de la validation avec Joi, deux données sont nécessaires :

  • L’objet de données à valider
  • Le schéma Joi

Joi.validate (données, schéma, [options]);

Un troisième argument facultatif pourrait être fourni pour personnaliser le comportement de validation.

 

Les bases

Validation des chaînes

Ce projet particulier se composait de plusieurs formulaires avec des champs d’informations générales : le nom, l’adresse, l’e-mail et le numéro de téléphone de l’utilisateur.
Ces champs sont assez simples et tout à fait appropriés, tout comme la validation.

Jetons un coup d’œil à un exemple de certaines données:

const data = {
nom: 'Sydney Prescott',
adresse: '1996 Woodsboro Ln',
e - mail: 'sydney.prescott@woodsborocc.edu',
téléphone: '2135551997'
};

Avec cette structure de données générale, nous pouvons commencer à écrire notre schéma Joi pour validation.
Commençons par les chaînes :

const schema = Joi.object (). keys ({
nom: Joi.string (). required (),
adresse: Joi.string (). required (),
email: Joi.string (). email (). required ( )
});

À partir du schéma ci-dessus, il est assez clair de voir ce que nous attendons de chaque propriété.
De plus, en ajoutant la méthode  required(), nous pouvons organiser rapidement les données importantes tout en pouvant doubler la propriété required sur les champs de formulaire eux-mêmes pour plus de sécurité.

Le champ d’adresse, cependant, nécessitait une considération supplémentaire.
Joi fournit des moyens supplémentaires pour soutenir de telles caractères spéciaux .

adresse: Joi 
  .string () 
  .trim () 
  .regex (/ ^ [az \ d \ s \ - \. \,] * $ / i) 
  .max (100) 
  .required ()

Le schéma ci-dessus présente quelques options intéressantes.
Tout d’abord, la méthode trim() supprimera tous les espaces de fin de la valeur.
La méthode max()est également utilisée pour limiter la longueur de la valeur à 100 caractères.

Mais la principale méthode sur laquelle j’aimerais attirer l’attention ici est regex().
Cette méthode permet un meilleur contrôle sur les valeurs prises en charge étendant virtuellement la validation  string() par défaut et ajoutant un comportement personnalisé par-dessus.

Si vous l’aviez remarqué, notre objet de données stocke le numéro de téléphone sous forme de chaîne.
Voyons comment nous pouvons tirer parti de la méthode regex() dans notre schéma pour ce cas.

téléphone: Joi.string (). trim (). regex (/ ^ [0-9] {7,10} $ /). requis ();

En utilisant la méthode regex() ici, nous pouvons valider la chaîne pour nous assurer que sa valeur est comprise entre 7 et 10 caractères, tous compris entre 0 et 9.

Mais vous ne stockerez pas toujours les numéros de téléphone sous forme de chaînes.
Finalement, la validation des champs numériques devra être écrite et Joi rend cela tout aussi direct.

 

Validation des nombres

Examinons les exemples de données suivants :

const data = {
salaire: 48000,
âge: 30
};

En supposant que nous recherchons des utilisateurs âgés de 18 à 65 ans, notre schéma pourrait ressembler à ceci :

const schema = Joi.object (). keys ({
salaire: Joi.number (). required (),
age: Joi.number (). min (18) .max (65) .required ()
});

Encore une fois, la lisibilité de Joi est un gros avantage car l’utilisation des méthodes min() et max() indique rapidement comment nous validons nos données.

Validation conditionnelle

Il y a de fortes chances que vous ayez utilisé ou créé un formulaire avec des champs conditionnels : valider uniquement certains champs lorsque d’autres critères sont remplis.

const data = {
hasCreditCards: true,
creditCardDebt: 750,
creditCardMonthlyPayment: 75
};

Avec le modèle de données ci-dessus et comprenant notre besoin de validation conditionnelle, examinons notre schéma Joi.

const schema = Joi.object (). keys ({
hasCreditCards: Joi.bool (). required,
creditCardDebt: Joi.number (). when ('hasCreditCards', {
is: true,
then: Joi.number (). min (0) .required ()
}),
creditCardMonthlyPayment: Joi.number (). When ('hasCreditCards', {
is: true,
then: Joi.number (). Min (0) .required ()
})
});

Dans cet exemple, la méthode when() est exploitée, quand hasCreditCards est true alors valider en utilisant le schéma suivant : Joi.number (). min (0) .required ().

 

Nous avons introduit la bibliothèque de validation Joi et présenté quelques fonctionnalités de base et comment l’utiliser, étant donné que Joi est capable de faire beaucoup plus que ce que nous avons couvert ici et heureusement, leur documentation (trouvée ici) est intéressante je vous invite à y jeter un coup d’œil .

 

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *