Par exemple, validation d'e-mail avec JavaScript (Regex)

Plusieurs fois, nous sommes confrontés à la nécessité de valider qu'une adresse e-mail est entrée dans un certain champ de notre formulaire. email valide. Dans cet article, nous allons apprendre à valider des e-mails à l'aide d'expressions régulières (également appelées regex) en JavaScript.

Qu'est-ce qu'une expression régulière (regex) ?

Une expression régulière est une séquence de caractères qui définit un modèle de recherche. Dans ce cas, nous voulons trouver un modèle qui représente une adresse e-mail valide.

Les expressions régulières sont un outil puissant et flexible pour travailler avec des chaînes de texte et valider les données d'entrée.

Validation des e-mails avec regex

Pour valider qu'un e-mail est valide, nous devons vérifier que le format est correct, c'est-à-dire qu'il comprend un @ et un domaine. Pour cela nous utilisons l'expression suivante:

var expression régulière = /^[w-]+(.[w-]+)*@[w-]+(.[w-]+)*.[a-zA-Z]{2,}$/;

Exemple de formulaire complet

Dans l'exemple suivant, nous montrons comment valider une adresse e-mail à l'aide de JavaScript et d'une expression régulière. Les étapes que nous suivons sont:

1. On définit une fonction appelée validerMail qui prend comme argument l'email à valider.
2. Nous créons une variable expression régulière A contenant l'expression régulière pour valider l'e-mail.
3. Nous utilisons la méthode test() de l'expression régulière pour vérifier si l'e-mail saisi correspond au modèle.
4. Si l'e-mail est valide, nous affichons un message d'alerte indiquant qu'il est valide; sinon, nous affichons un message d'alerte indiquant qu'il n'est pas valide.
5. Dans le HTML, nous créons un champ de saisie de type "email" et un bouton qui, lorsqu'il est cliqué, appelle la fonction validerMail avec la valeur saisie dans le champ de saisie.

function validateEmail (mail) {
// Expression régulière pour valider l'email
var regex = /^[w-]+(.[w-]+)*@[w-]+(.[w-]+)*.[a-zA-Z]{2,}$/;
// Vérifier si le mail correspond au modèle défini par l'expression régulière
if (regex.test (mail)) {
alert("Valid email");
} else {
alert ("E-mail invalide");
}
}

Validation des e-mails avec JavaScript et regex

Valider

Avantages et inconvénients de la validation avec JavaScript

La validation des données d'entrée, telles que les adresses e-mail, à l'aide de JavaScript côté client présente des avantages et des inconvénients:

avantage	Désavantages
Feedback immédiat pour l'utilisateur	N'est pas sûr
Moins de charge sur le serveur	Compatibilité entre navigateurs
Améliorer l'expérience utilisateur	Duplication des efforts (côté client/serveur)
Réduction du temps de réponse	Ne remplace pas la validation côté serveur

La validation des données à l'aide de JavaScript ne remplace pas la validation côté serveur. Cependant, cela aide à réduire la charge. Pour valider les données côté serveur je vous recommande de lire:

• Validation de courrier avec PHP