VeeValidate pour la validation fondée sur un schéma
useForm(), useField(), schémas yup, messages d’erreur, gestion de la validation asynchrone.
VeeValidate pour la validation fondée sur un schéma est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.
Passer à l’échelle avec VeeValidate
À mesure que les formulaires s’agrandissent, écrire la validation à la main devient fastidieux. VeeValidate est une bibliothèque Vue populaire qui gère l’état du formulaire, exécute la validation par rapport à un schéma et expose les erreurs, le tout de manière réactive.
Validation basée sur un schéma
Au lieu d’écrire les vérifications à la main, décrivez les règles de manière déclarative dans un schema. Associer VeeValidate à yup vous permet de construire ce schéma de manière fluide.
<script setup>
import * as yup from 'yup'
const schema = yup.object({
name: yup.string().required(),
email: yup.string().email().required()
})
</script>Configurer le formulaire avec useForm
useForm initialise l’état et la validation au niveau du formulaire. Transmettez votre schéma comme validationSchema et il reliera tous les éléments.
<script setup>
import { useForm } from 'vee-validate'
const { handleSubmit, errors } = useForm({
validationSchema: schema
})
</script>Connecter un champ avec useField
useField enregistre un champ de saisie par son nom. Il retourne la value du champ, son errorMessage et un gestionnaire handleBlur.
<script setup>
import { useField } from 'vee-validate'
const { value: name, errorMessage, handleBlur } = useField('name')
</script>Lier le champ dans le modèle
Liez la value retournée avec v-model et reliez @blur à handleBlur pour valider lors du flou.
<template>
<input v-model="name" @blur="handleBlur" />
<span>{{ errorMessage }}</span>
</template>Afficher le message d’erreur
Chaque champ expose son propre errorMessage, qui est une chaîne réactive. Il est vide lorsque le champ est valide et contient le message du schéma lorsqu’il est invalide.
<template>
<input v-model="name" @blur="handleBlur" />
<span v-if="errorMessage" class="error">{{ errorMessage }}</span>
</template>Gérer l’envoi
handleSubmit entoure votre fonction d’envoi. Il exécute d’abord la validation et n’appelle votre fonction de rappel avec les valeurs que si l’ensemble du formulaire est valide.
<script setup>
const onSubmit = handleSubmit((values) => {
console.log('valid form', values)
})
</script>
<template>
<form @submit="onSubmit">...</form>
</template>Erreurs au niveau du formulaire
L’objet errors de useForm associe les noms des champs à leurs messages actuels, ce qui est pratique pour un récapitulatif ou une interface conditionnelle.
<script setup>
const { errors } = useForm({ validationSchema: schema })
// errors.name, errors.email
</script>Pourquoi utiliser une bibliothèque
- Les schémas déclaratifs remplacent les vérifications manuelles répétitives.
- Le moment de la validation lors du flou, de la modification et de l’envoi est intégré.
- Un
errorMessagepar champ et deserrorsau niveau du formulaire. - Des règles asynchrones et entre champs faciles à créer avec yup.
Composants ou API de composition
VeeValidate propose également les composants <Form> et <Field> pour une approche privilégiant le modèle. Les fonctions de composition useForm et useField s’intègrent mieux à <script setup> et offrent davantage de contrôle.
Validation manuelle ou basée sur schema
La validation manuelle enseigne les mécanismes et convient aux tout petits formulaires. La validation basée sur un schéma avec VeeValidate et yup s’adapte aux formulaires volumineux et complexes avec beaucoup moins de code et moins de bogues.
Vérification rapide
Testez vos connaissances sur VeeValidate.
Récapitulatif
Validation basée sur un schéma avec VeeValidate :
- Décrivez les règles dans un schéma
yuptransmis commevalidationSchema. useFormgère l’état du formulaire,errorsethandleSubmit.useFieldretournevalue,errorMessageethandleBlurpour chaque champ de saisie.- Cette approche s’adapte bien mieux que la validation manuelle aux formulaires volumineux.
Apprends HTML avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 42
- Leçons
- 156
Questions Fréquemment Posées
La leçon « VeeValidate pour la validation fondée sur un schéma » est-elle gratuite ?
Oui — le texte complet de « VeeValidate pour la validation fondée sur un schéma » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « VeeValidate pour la validation fondée sur un schéma » ?
useForm(), useField(), schémas yup, messages d’erreur, gestion de la validation asynchrone. Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Vue Academy ?
Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « VeeValidate pour la validation fondée sur un schéma » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?
Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- v-model sur tous les éléments de formulaire
- Envoi et réinitialisation des formulaires
- Stratégies de validation manuelle
- VeeValidate pour la validation fondée sur un schéma