Validation de formulaire personnalisée avec Vue.js

Introduction

Dans ce projet, vous allez apprendre à implémenter un validateur de formulaire personnalisé à l'aide de Vue.js. Le validateur de formulaire personnalisé vous permet de valider les champs du formulaire et de vérifier la validité des données avant que l'utilisateur n'envoie le formulaire.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment implémenter le composant FormInput pour mettre à jour la valeur de v-model du composant lorsque la valeur du champ d'entrée change.
• Comment implémenter la fonction is_email pour valider l'adresse e-mail selon des règles spécifiques.
• Comment implémenter la fonction validateForm pour valider les données du formulaire selon les règles de validation définies.

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

• Créer un validateur de formulaire personnalisé en Vue.js.
• Valider les champs du formulaire à l'aide de règles de validation personnalisées.
• Gérer les erreurs de validation de formulaire et les afficher à l'utilisateur.

Configurer la structure du projet

Dans cette étape, vous allez configurer les fichiers et la structure du projet. Suivez les étapes ci-dessous pour terminer cette étape :

Ouvrez le dossier du projet. La structure de répertoire est la suivante :

├── components
│   ├── FormInput.js
│   └── FormValidator.js
├── css
├── index.html
├── js
│   └── util.js
└── lib
    └── vue.global.js

Où :

• index.html est la page principale.
• css est le dossier pour stocker les styles du projet.
• lib est le dossier pour stocker les dépendances du projet.
• components/FormInput.js est le composant input.
• components/FormValidator.js est le composant de validation de formulaire.
• js/util.js est la fonction utilitaire requise par le projet.

Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.

Ensuite, ouvrez "Web 8080" en haut de la machine virtuelle et rafraîchissez manuellement la page pour la voir.

Implémenter le composant FormInput

Dans cette étape, vous allez apprendre à implémenter le composant FormInput pour mettre à jour la valeur de v-model du composant dans index.html lorsque la valeur du champ d'entrée change.

1. Ouvrez le fichier FormInput.js situé dans le répertoire components.

2. Dans la fonction setup du composant FormInput, trouvez la section TODO pour l'objectif 1.

3. Implémentez le code pour déclencher un événement afin de mettre à jour la valeur de v-model du composant lorsque la valeur du champ d'entrée (ayant la classe form-input) change.

   watch(inputValue, (newValue) => {
     emit("update:modelValue", newValue);
   });
   

   Ce code utilise la fonction watch pour observer les modifications de la variable reactive inputValue. Lorsque la valeur change, il émet un événement avec la nouvelle valeur pour mettre à jour la liaison v-model dans le composant parent.

4. Enregistrez les modifications dans le fichier FormInput.js.

Implémenter la fonction is_email

Dans cette étape, vous allez apprendre à implémenter la fonction is_email dans le fichier util.js pour valider l'adresse e-mail.

1. Ouvrez le fichier util.js situé dans le répertoire js.
2. Dans la fonction is_email, trouvez la section TODO pour l'objectif 2.
3. Implémentez la logique pour valider l'adresse e-mail selon les exigences suivantes :
   • L'adresse e-mail doit avoir entre 6 et 20 caractères de long.
   • L'adresse e-mail doit être composée d'une partie nom d'utilisateur et d'une partie domaine, séparées par le symbole @.
   • La partie nom d'utilisateur doit avoir au moins 1 caractère et peut contenir des chiffres ou des lettres.
   • La partie domaine doit contenir un . au milieu, et la partie avant le . doit avoir au moins 1 caractère, tandis que la partie après le . doit avoir de 2 à 4 lettres.

Voici une implémentation exemple :

const is_email = (val) => {
  const emailRegex = /^[a-zA-Z0-9]+@[a-zA-Z0-9]+.[a-zA-Z]{2,4}$/;
  return emailRegex.test(val);
};

4. Enregistrez les modifications dans le fichier util.js.

Implémenter la fonction validateForm

Dans cette étape, vous allez apprendre à implémenter la fonction validateForm dans le fichier FormValidator.js pour valider les données du formulaire.

1. Ouvrez le fichier FormValidator.js situé dans le répertoire components.
2. Dans la fonction validateForm, trouvez la section TODO pour l'objectif 3.
3. Implémentez la logique pour valider les données du formulaire en fonction de l'objet formRules fourni. La validation doit suivre les règles suivantes :
   1. Si le champ nickname est vide, ajoutez un message d'erreur à l'objet errors avec la clé "nickname".
   2. Pour le champ email :
   • Si le champ est vide, ajoutez un message d'erreur à l'objet errors avec la clé "email".
   • Si l'adresse e-mail ne respecte pas les règles ou n'est pas dans la plage de longueur correcte, ajoutez un message d'erreur à l'objet errors avec la clé "email".

Voici une implémentation exemple :

const validateForm = () => {
  return new Promise((resolve, reject) => {
    errors.value = {}; // Efface le message d'erreur précédent

    // Valide le nom d'utilisateur
    try {
      props.rules.nickname.map((item) => {
        item?.validator(null, props.formData.nickname, (err) => {
          if (err) {
            throw "nickname|" + err.message;
          }
        });
      });
    } catch (e) {
      const parseErr = e.split("|"),
        errKey = parseErr[0],
        errValue = parseErr[1];
      errors.value[errKey] = errValue;
    }

    // Valide l'e-mail
    try {
      props.rules.email.map((item) => {
        if (item?.required) {
          if (props.formData.email == "") throw "email|" + item.message;
        }
        if (item?.type) {
          if (!validateByType(item.type, props.formData.email))
            throw "email|" + item.message;
          if (props.formData.email.length < 6) throw "email|" + item.message;
          if (props.formData.email.length > 20) throw "email|" + item.message;
        }
      });
    } catch (e) {
      const parseErr = e.split("|"),
        errKey = parseErr[0],
        errValue = parseErr[1];
      errors.value[errKey] = errValue;
    }

    if (hasErrors.value) {
      resolve(false); // Une erreur existe, la validation a échoué
    } else {
      resolve(true);
    }

    emit("valid", errors.value);
  });
};

4. Enregistrez les modifications dans le fichier FormValidator.js.

Félicitations! Vous avez maintenant terminé l'implémentation du validateur de formulaire personnalisé. Vous pouvez maintenant tester l'application en exécutant le projet et en interagissant avec le formulaire. L'effet terminé est le suivant :

Résumé

Félicitations! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires dans LabEx pour améliorer vos compétences.