Comment valider une adresse e-mail en JavaScript ?

Méthode des expressions régulières

Les expressions régulières (regex) sont utiles pour la validation d'e-mails en JavaScript. Un modèle regex peut vérifier si une adresse e-mail suit le bon format.

Voici un modèle regex de base pour la validation d'e-mail :

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

Ce modèle vérifie :

• Des caractères qui ne sont pas des espaces ou des symboles @
• Un symbole @
• Plus de caractères qui ne sont pas des espaces ou des symboles @
• Un point
• Se terminant par des caractères qui ne sont pas des espaces ou des symboles @

Avantages de l'utilisation des regex :

• Flexibles et personnalisables
• Peuvent gérer des règles complexes
• Traitement rapide

Inconvénients de l'utilisation des regex :

• Peuvent être difficiles à lire et à maintenir
• Peuvent manquer certains cas particuliers
• Les modèles stricts peuvent rejeter des e-mails valides

const emailRegex = new RegExp(
  '^[^\\s@]+@' +    // Début, un ou plusieurs caractères qui ne sont pas espace ou @
  '[^\\s@]+\\.' +   // @, un ou plusieurs caractères qui ne sont pas espace ou @, puis un point
  '[^\\s@]+$',      // Un ou plusieurs caractères qui ne sont pas espace ou @, puis fin
  'i'               // Drapeau insensible à la casse
);

Validation intégrée HTML5

HTML5 inclut la validation d'e-mail en utilisant l'attribut type="email" sur les champs de saisie.

Exemple :

<input type="email" id="email" name="email" required>

Cette méthode :

• Fournit une validation de base du format d'e-mail
• Déclenche des messages d'erreur du navigateur
• Fonctionne sans JavaScript

Compatibilité des navigateurs :

• La plupart des nouveaux navigateurs prennent en charge type="email"
• Les anciens navigateurs peuvent le traiter comme une saisie de texte
• La validation peut différer entre les navigateurs

La validation HTML5 est souvent utilisée avec JavaScript pour plus de contrôle sur le processus et le retour utilisateur.

<form id="emailForm">
  <input type="email" id="email" name="email" required>
  <button type="submit">Envoyer</button>
</form>

<script>
document.getElementById('emailForm').addEventListener('submit', function(event) {
  const email = document.getElementById('email').value;
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

  if (!emailRegex.test(email)) {
    event.preventDefault();
    alert('Veuillez entrer une adresse e-mail valide.');
  }
});
</script>

Création d'une fonction de validation

Pour créer une fonction de validation d'e-mail en JavaScript :

1. Définissez la fonction :

   function validateEmail(email) {
   // La logique de validation va ici
   }

2. Ajoutez le modèle regex :

   function validateEmail(email) {
   const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
   return emailRegex.test(email);
   }

Le modèle regex /^[^\s@]+@[^\s@]+\.[^\s@]+$/ vérifie :

• ^ : Début de la chaîne
• [^\s@]+ : Un ou plusieurs caractères qui ne sont ni des espaces ni @
• @ : Le symbole @
• [^\s@]+ : Un ou plusieurs caractères qui ne sont ni des espaces ni @
• \. : Un point littéral
• [^\s@]+ : Un ou plusieurs caractères qui ne sont ni des espaces ni @
• $ : Fin de la chaîne

3. Utilisez la fonction :

   const email = "user@example.com";
   if (validateEmail(email)) {
   console.log("Adresse e-mail valide");
   } else {
   console.log("Adresse e-mail invalide");
   }

Gestion de la saisie utilisateur

Pour gérer la saisie utilisateur pour la validation des e-mails :

1. Capturez la saisie :

const emailInput = document.getElementById('email-input');
const submitButton = document.getElementById('submit-button');

submitButton.addEventListener('click', function() {
  const userEmail = emailInput.value;
  // La logique de validation ici
});

2. Validez et affichez les résultats :

submitButton.addEventListener('click', function() {
  const userEmail = emailInput.value;
  const resultDisplay = document.getElementById('result-display');

  if (validateEmail(userEmail)) {
    resultDisplay.textContent = "Adresse e-mail valide";
    resultDisplay.style.color = "green";
  } else {
    resultDisplay.textContent = "Adresse e-mail invalide";
    resultDisplay.style.color = "red";
  }
});

Ce code capture votre saisie, la valide en utilisant la fonction validateEmail, et affiche le résultat avec un style approprié.