[Vue.JS] Validation de formulaires avec Yup

Publié le 18 octobre 202318 octobre 2023 par Vincent L

Yup permet de construire des schémas pour l’analyse et la validation des valeurs d’un formulaire à l’exécution. Il peut notamment être utilisé dans une application Vue en combinaison avec le plugin vee-validate. La librairie est extensible et vous pouvez également y ajouter vos propres méthodes. Et cerise sur le gâteau : TypeScript est géré ! Voyons comment ajouter un schéma de validation à nos formulaires.

Pour nos tests nous avons donc utilisé Vue.js 3 et vee-validate 4.

Installation

Pour ajouter le package nécessaire, exécutez la commande suivante dans Powershell ou dans une invite de commandes.

npm install yup

Créer un schéma de validation avec Yup

Supposons un formulaire avec deux champs: l’un permet aux utilisateurs.trices d’introduire leur login, le second permettra d’introduire leur mot de passe. Ils seront englobés dans un élément Form fourni par le plugin vee-validate.

<Form :validationSchema="schema" @submit="submit">
	<!-- your fields here -->
</Form>

Jusqu’à présent nous avons défini un schéma de validation dans l’attribut du formulaire mais il n’existe pas.

Dans la partie script de notre fichier .vue, on va donc ajouter ceci :

import * as yup from 'yup'

const schema = yup.object({
  login: yup
    .string()
    .required('The login is mandatory'),
  password: yup
    .string()
    .required('The password is mandatory'),
})

Comme on peut le constater, construire un schéma de validation avec Yup est assez facile et le code est plutôt lisible. Dans ce cas-ci on décrit à Yup les différentes règles à appliquer pour les champs du formulaire, en précisant notamment leur type. Notez que dans les schémas « objet » aucune transformation n’est appliquée par défaut.

Validation de mots de passe

Il existe un autre package bien utile, yup-password, qui peut être rajouté à votre application. Il rajoute des règles de validation pour s’intégrer parfaitement à Yup. Rappelons-le: l’une des puissantes fonctionnalités de Yup, c’est l’extensibilité.

Une fois installé, voici comment l’utiliser :

import * as yup from "yup"
import YupPassword from 'yup-password'

YupPassword(yup)

Une fois l’import effectué, vous pouvez définir votre schéma de validation :

const schema = yup.object({
  login: yup
    .string()
    .required('The login is mandatory'),
  password: yup
    .string()
    .password().min(8, 'Minimum 8 chars')
    .minNumbers(1, 'Minimum 1 number')
    .minUppercase(1, 'Minimum 1 uppercase letter')
    .minSymbols(1, 'Minimum 1 symbol')
})

Validation à l’aide de tests

Il est aussi possible de créer des tests : ceux-ci, s’ils renvoient « faux », déclencheront une erreur pour le champ ciblé. Un test comporte les propriétés suivantes : un nom unique, un message, et la méthode test.

Exemple :

yup.string()
	.test({
		name: 'post-code-between', 
		message: 'Postcode is invalid', 
		test: (val: any) => val != '' 
			&& parseInt(val) >= 1000 
			&& parseInt(val) <= 9992
	})

Vous pouvez également créer ce test sous forme de constante réutilisable dans votre code. Avec TypeScript, il faudra évidemment typer celle-ci.

const testPostCode : TestConfig = {
    name: 'post-code-between', 
    message: 'Postcode is invalid', 
    test: (val: any) => val != '' 
		&& parseInt(val) >= 1000 
		&& parseInt(val) <= 9992
}

Validation uniquement si le champ a la même valeur qu’un autre

Ce cas arrive typiquement quand on veut vérifier qu’un mot de passe est le même que celui tapé dans le champ précédent. Ou alors pour des adresses e-mail. La méthode oneOf() permet de vérifier que la valeur fait partie d’une liste donnée. Dans ce cas-ci, la valeur autorisée, c’est celle du champ « password » auquel on fera référence avec la méthode ref().

const schema = yup.object({
  login: yup
    .string()
    .required('The login is mandatory'),
  password: yup
    .string()
	.required('The password is mandatory'),
  password_confirm: yup
    .string()
	.required('The paswword confirmation is mandatory')
    .oneOf([yup.ref('password')], 'Passwords should match'),
})

Valider à l’aide d’une expression régulière

Dans certains cas il peut être utile d’avoir recours aux expressions régulières pour valider des champs spécifiques. Notez que l’exemple suivant vérifie simplement si le champ « code » contient bien un code à 6 chiffres. Mais on peut bien sûr imaginer des vérifications bien plus complexes.

const schema = yup.object({
  code: yup
    .string()
    .required('The code is mandatory')
    .matches(/[0-9]{6}/, 'The code is invalid')
})

Validation conditionnée par la valeur d’un autre champ

Vous pouvez également déterminer si un champ doit être soumis à une validation par rapport à la valeur d’un autre champ. Cela est réalisé grâce à la méthode when().