0Pricing
Vue Academy · Leçon

Stratégies de validation manuelle

Objets d’erreurs réactifs, validation au flou ou à l’envoi, vérification de la confirmation du mot de passe.

Stratégies de validation manuelle est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 3 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.

Valider sans bibliothèque

Pour les formulaires simples, vous pouvez valider manuellement à l’aide d’un état réactif. Vous suivez les erreurs, effectuez les vérifications lors de l’envoi ou du flou, puis affichez les messages avec des directives. Cela vous permet d’apprendre les notions fondamentales sur lesquelles repose chaque bibliothèque.

Un objet d’erreurs

Conservez un objet réactif errors indexé par nom de champ. Une chaîne vide (ou une clé absente) signifie qu’il n’y a aucune erreur.

<script setup>
import { reactive } from 'vue'
const form = reactive({ name: '', email: '' })
const errors = reactive({ name: '', email: '' })
</script>

Une fonction validate

Écrivez une fonction validate qui vérifie chaque champ et définit les messages dans l’objet des erreurs. Retournez une indication précisant si le formulaire est valide.

<script setup>
function validate() {
  errors.name = form.name ? '' : 'Name is required'
  errors.email = form.email.includes('@') ? '' : 'Invalid email'
  return !errors.name && !errors.email
}
</script>

Valider lors de l’envoi

Appelez validate au début de votre gestionnaire d’envoi et interrompez son exécution en cas d’échec. Vous garantissez ainsi qu’aucune donnée invalide ne sera envoyée.

<script setup>
function onSubmit() {
  if (!validate()) return
  // proceed to send
}
</script>

Validation par champ lors du flou

Valider uniquement lors de l’envoi peut sembler lent. Validez un seul champ lorsque l’utilisateur le quitte en utilisant @blur pour obtenir un retour immédiat.

<script setup>
function validateName() {
  errors.name = form.name ? '' : 'Name is required'
}
</script>

<template>
  <input v-model="form.name" @blur="validateName" />
</template>

Afficher les messages d’erreur

Utilisez v-if pour afficher un message uniquement lorsque le champ concerné contient une erreur. Placez-le à proximité du champ de saisie.

<template>
  <input v-model="form.name" @blur="validateName" />
  <span v-if="errors.name" class="msg">{{ errors.name }}</span>
</template>

Mettre en forme les champs invalides

Liez une classe avec la syntaxe d’objet afin d’ajouter une bordure rouge lorsqu’une erreur existe. La classe s’applique uniquement tant que errors.name est évalué comme vrai.

<input
  v-model="form.name"
  :class="{ error: errors.name }"
  @blur="validateName"
/>

Le style d’erreur

Une petite règle CSS complète l’apparence : une bordure rouge indique que le champ nécessite votre attention.

<style>
.error { border: 1px solid red; }
.msg { color: red; font-size: 12px; }
</style>

Validité calculée

Déduisez un indicateur global de validité avec computed afin d’activer ou de désactiver le bouton d’envoi de manière réactive.

<script setup>
import { computed } from 'vue'
const isValid = computed(() => !errors.name && !errors.email)
</script>

<template>
  <button :disabled="!isValid">Submit</button>
</template>

Avantages et limites

La validation manuelle est transparente et ne nécessite aucune dépendance, ce qui la rend idéale pour les petits formulaires. Mais lorsque les règles se multiplient — vérifications entre champs, validation asynchrone, nombreux champs — le code répétitif s’accumule, d’où l’existence des bibliothèques.

Résumé du flux de validation

Le modèle est le suivant : des erreurs réactives, une fonction validate, son exécution lors de l’envoi (et éventuellement du flou), l’affichage des messages avec v-if et la mise en forme avec une classe conditionnelle.

Vérification rapide

Testez vos connaissances sur la validation manuelle.

Récapitulatif

Modèles de validation manuelle :

  • Conservez un objet réactif errors indexé par champ.
  • Une fonction validate définit les messages et retourne la validité.
  • Validez lors de l’envoi, et champ par champ avec @blur pour obtenir un retour rapide.
  • Affichez les messages avec v-if="errors.x" et mettez-les en forme avec :class="{ error: errors.x }".

Questions Fréquemment Posées

La leçon « Stratégies de validation manuelle » est-elle gratuite ?

Oui — le texte complet de « Stratégies de validation manuelle » 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 « Stratégies de validation manuelle » ?

Objets d’erreurs réactifs, validation au flou ou à l’envoi, vérification de la confirmation du mot de passe. 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 3 sur 4.

Combien de temps prend la leçon « Stratégies de validation manuelle » ?

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

  1. v-model sur tous les éléments de formulaire
  2. Envoi et réinitialisation des formulaires
  3. Stratégies de validation manuelle
  4. VeeValidate pour la validation fondée sur un schéma
← Retour à Vue Academy