Comment valider une adresse e-mail en JavaScript : quatre méthodes fiables

Autour de 30% Une grande partie des adresses e-mail d'une liste deviennent obsolètes en moins d'un an. Si plus de 10 % de votre liste est invalide, moins de 44 % de vos e-mails parviennent à destination. Nombre de ces adresses erronées s'introduisent dans les bases de données via des formulaires dont la validation est insuffisante.

La validation des adresses e-mail en JavaScript fonctionne par étapes. Vérifier le format d'une adresse est relativement simple. Confirmer que le domaine peut recevoir des e-mails est plus complexe, mais reste possible. La difficulté réside dans la vérification de l'existence et de la capacité de la boîte mail à recevoir des messages ; JavaScript côté client ne peut pas effectuer cette vérification seul.

La validation s'effectue généralement à trois niveaux : syntaxe, domaine et boîte aux lettres. JavaScript gère efficacement les vérifications syntaxiques, tandis que les bibliothèques et les API peuvent faciliter la vérification des domaines. En revanche, la vérification de la boîte aux lettres nécessite une requête API côté serveur, car le navigateur ne peut pas confirmer directement l'existence d'une boîte de réception.

Méthodes de validation d'adresse e-mail en JavaScript

Chaque méthode ci-dessous ajoute une couche à votre système de validation. Elles sont classées de la plus simple à la plus complète. La plupart des applications en production en utilisent au moins deux, tandis que les processus d'inscription critiques pour la sécurité utilisent les quatre.

1. L'attribut HTML5 type="email"

Le point de départ le plus simple pour la validation d'adresse e-mail en JavaScript est l'attribut HTML5 `type="email"` appliqué à votre élément `input`. Les navigateurs appliquent automatiquement une validation de format de base lors de la soumission du formulaire.

Adresse email

Soumettre

Le navigateur vérifie que le champ contient le symbole @ et une chaîne de caractères de type nom de domaine avant d'autoriser la soumission. La validation est effectuée par défaut lors de la soumission.

Cependant, la vérification HTML5 est très basique. Elle accepte des adresses comme a@b ou utilisateur@domaine, même si ces adresses ne recevraient jamais de véritables courriels. De plus, elle ne fournit aucun retour d'information en temps réel pendant la saisie. Par conséquent, utilisez-la comme point de départ : intégrez-la systématiquement, mais ne vous y fiez jamais comme unique vérification.

2. Validation avec un modèle d'expression régulière

Les expressions régulières (regex) constituent la méthode de validation d'adresse e-mail la plus courante en JavaScript. Elles permettent de contrôler le formatage à la demande, avant la soumission du formulaire, et de fournir un retour d'information immédiat.

Voici une expression régulière de base qui couvre les formats valides les plus courants :

fonction isValidEmail(email) {

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

renvoie regex.test(email);

}

// Utilisation

console.log(isValidEmail(“[email protected]")); // vrai

console.log(isValidEmail(“notanemail”)); // faux

Comprendre le modèle :

• ^ — début de la chaîne
• [^\s@]+ — un ou plusieurs caractères qui ne sont ni des espaces ni des @
• @ — le symbole @ littéral
• [^\s@]+ — un ou plusieurs caractères après @ (le domaine)
• \. — un point littéral
• [^\s@]+$ — un ou plusieurs caractères après le point (le TLD)

Pour une validation plus stricte conforme à la RFC 5322, vous pouvez utiliser un modèle plus spécifique :

fonction isValidEmail(email) {

const regex = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*\.[a-zA-Z]{2,}$/;

renvoie regex.test(email);

}

Envelopper l'expression régulière dans une fonction réutilisable comme isValidEmail() permet de centraliser la logique de validation et facilite sa mise à jour.

La principale limitation est que les expressions régulières ne vérifient que le format. Elles ne peuvent pas déterminer si un domaine existe ou si une boîte aux lettres est réelle. Une adresse comme [email protected] Le courriel sera tout de même accepté car le format semble valide, même si le domaine contient une faute de frappe et qu'il ne sera probablement jamais distribué.

3. Utilisation d'une bibliothèque de validation JavaScript

Les bibliothèques établies comme validator.js gèrent de nombreux cas que les expressions régulières classiques ne prennent pas en charge, notamment les domaines internationaux, les formats d'adresse e-mail inhabituels mais valides et les extensions de domaine récentes. Si votre application utilise déjà un framework de validation, l'utilisation d'une bibliothèque est une solution plus propre que la maintenance d'expressions régulières personnalisées.

Installez validateur.js :

npm install validateur

Utilisez-le dans votre code :

importer validateur depuis 'validator';

fonction isValidEmail(email) {

retourner validator.isEmail(email);

}

// Utilisation

console.log(isValidEmail(“[email protected]")); // vrai

console.log(isValidEmail(“[email protected]")); // FAUX

console.log(isValidEmail(“user@example”)); // faux

La méthode validator.isEmail() effectue un contrôle de format plus complet qu'une simple expression régulière et détecte de nombreux problèmes de formatage courants.

La limitation reste la même : les bibliothèques ne valident que la structure, et non la délivrabilité. Une adresse comme [email protected] Cette méthode est toujours acceptée car le format est techniquement correct. Pour les flux d'inscription en production où la qualité des listes est importante, elle nécessite un appel API en complément.

4. Validation à l'aide d'une API de validation d'e-mail

Seule une approche par API permet de confirmer l'existence réelle d'une boîte mail. Les méthodes présentées jusqu'ici se limitent à la validation du format de l'adresse électronique. Une API vérifie si l'adresse est effectivement autorisée à recevoir des e-mails.

Le API de validation d'emails DeBounce Vérifie la syntaxe, les enregistrements MX du domaine, l'existence de la boîte aux lettres, le statut des adresses jetables, les comptes de rôle et le comportement du domaine générique, le tout en un seul appel d'API. Voici un exemple utilisant la fonction `fetch()` en JavaScript :

fonction asynchrone validateEmailWithAPI(email) {

const apiKey = 'VOTRE_CLÉ_API_DEBOUNCE';

const url = `https://api.debounce.io/v1/?api=${apiKey}&email=${encodeURIComponent(email)}`;

essayez {

const réponse = await fetch(url);

const data = attendre la réponse.json();

revenir {

résultat : data.debounce?.result,

raison : data.debounce?.reason,

free_email: data.debounce?.free_email === “true” || data.debounce?.free_email === true,

did_you_mean: data.debounce?.did_you_mean,

rôle : data.debounce?.role === « true » || data.debounce?.role === true

};

} attraper (erreur) {

console.error('Erreur de validation :', erreur);

retourner null;

}

}

Les champs de réponse qui intéressent le plus les développeurs :

• Résultat — verdict principal : « Envoi sûr », « Risqué » ou « Invalide »
• motif — la constatation spécifique : livrable, jetable, fourre-tout, erreur de syntaxe, etc.
• did_you_mean — une adresse corrigée si l'API détecte une faute de frappe courante (par exemple, gmial.com → gmail.com)
• free_email — indique si l'adresse appartient à un fournisseur gratuit comme Gmail ou Yahoo.

Pour la détection des emails jetables côté client en particulier, DeBounce propose également une solution API gratuite d'email jetable que vous pouvez appeler directement depuis le navigateur sans exposer votre clé API principale.

Si vous préférez ne pas écrire de code du tout, le widget de validation JavaScript S'installe avec une simple balise script et gère la validation directement sur vos formulaires sans travail d'intégration personnalisé.

Mise en œuvre de la validation des e-mails en temps réel

La validation des adresses e-mail en temps réel améliore l'expérience utilisateur et la qualité des données, car les utilisateurs peuvent corriger leurs erreurs immédiatement, sans attendre la soumission du formulaire. L'important est de choisir l'événement approprié au type de validation effectué.

L'événement `oninput` est déclenché à chaque frappe, ce qui le rend utile pour des vérifications rapides comme la validation par expression régulière. L'événement `onchange` est déclenché lorsque le champ perd le focus, ce qui le rend plus adapté à la validation d'API car il attend que l'utilisateur ait fini de saisir du texte avant d'envoyer une requête.

Voici une configuration simple en temps réel utilisant oninput et une vérification par expression régulière :

const emailInput = document.getElementById('email');

const feedbackEl = document.getElementById('email-feedback');

emailInput.addEventListener('input', function () {

const email = this.value;

si (email.length === 0) {

feedbackEl.textContent = ”;

this.classList.remove('valid', 'invalid');

retour;

}

si (isValidEmail(email)) {

this.classList.add('valide');

this.classList.remove('invalide');

feedbackEl.textContent = '✓ Ça a l'air bien';

} Else {

this.classList.add('invalide');

this.classList.remove('valid');

feedbackEl.textContent = 'Veuillez saisir une adresse e-mail valide';

}

});

Lors de l'utilisation d'une méthode API, il est recommandé d'appliquer un délai d'attente (debounce) à l'appel, en attendant que l'utilisateur interrompe la saisie pendant 300 à 500 ms avant d'envoyer la requête. Cela évite d'envoyer un appel API à chaque frappe partielle.

laissez debounceTimer;

emailInput.addEventListener('input', function () {

effacerTimeout(debounceTimer);

debounceTimer = setTimeout(() => {

validateEmailWithAPI(this.value).then(result => {

si (résultat?.vouloir_vouloir) {

feedbackEl.textContent = `Vouliez-vous dire ${result.did_you_mean} ?`;

}

});

}, 400) ;

});

Un bon retour d'information en temps réel est clair et précis. « Voulez-vous dire… » [email protected]Le type « ? » est utile, tandis que les messages génériques comme « Adresse e-mail invalide » frustrent les utilisateurs et augmentent le taux d’abandon des formulaires.

Validation des adresses e-mail dans les frameworks JavaScript populaires

Les bibliothèques de formulaires au niveau du framework gèrent la gestion de l'état, l'affichage des erreurs et la logique de soumission ; l'intégration de la validation consiste donc généralement à spécifier une règle plutôt qu'à configurer manuellement les événements.

Réagir avec React Hook Form :

import { useForm } from 'react-hook-form';

export default function SignupForm() {

const { register, handleSubmit, formState: { errors } } = useForm();

revenir (

console.log(data))}>

<entrée

{…register('email', {

obligatoire : « Adresse e-mail requise »,

modèle: {

valeur: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,

message: 'Veuillez saisir une adresse e-mail valide'

}

})}

/>

{errors.email && {errors.email.message} }

S'inscrire

);

}

Vue avec VeeValidate :

import { useField, useForm } from 'vee-validate';

export par défaut {

installation() {

const { handleSubmit } = useForm();

const { valeur: email, messageErreur } = useField('email', (val) => {

return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val) || 'Entrez une adresse e-mail valide';

});

const onSubmit = handleSubmit(values ​​=> console.log(values));

renvoie { email, errorMessage, onSubmit };

}

};

Validation de schéma avec Zod ou Yup (utile lorsque vous souhaitez partager la logique de validation entre le client et le serveur) :

import { z } from 'zod';

const emailSchema = z.string().email('Veuillez saisir une adresse e-mail valide');

fonction validateEmail(email) {

const résultat = emailSchema.safeParse(email);

retourner result.success ? null : result.error.issues[0].message;

}

Dans les trois cas, le framework gère la configuration tandis que vous fournissez la règle de validation. Si vous remplacez ultérieurement l'expression régulière par un appel d'API, la structure globale reste globalement inchangée.

Les limites de la validation des e-mails côté client

La validation côté client peut vérifier si une adresse e-mail semble valide, mais elle ne peut pas déterminer si elle fonctionne réellement. Voici quelques problèmes que JavaScript seul ne peut pas détecter.

1. Fautes de frappe dans des noms de domaine qui semblent authentiques : des adresses comme [email protected], [email protected], [email protected] Le format est validé malgré des fautes d'orthographe dans les noms de domaine. L'e-mail n'atteint jamais le destinataire et l'adresse reste dans votre liste, générant des erreurs de distribution.
2. Adresses e-mail jetables et temporaires : des services comme 10minutemail.com et guerrillamail.com créent des boîtes de réception temporaires qui passent les contrôles de validation. Les utilisateurs les saisissent souvent pour éviter de remplir des formulaires d’inscription, puis l’adresse disparaît peu après.
3. Domaines « catch-all » : Certains domaines sont configurés pour accepter tous les courriels qui leur sont envoyés, même si la boîte mail associée n’existe pas. Une adresse sur un domaine « catch-all » passera la validation du format, les vérifications MX et même certaines vérifications SMTP, tout en restant, en pratique, non distribuable.
4. Adresses basées sur les rôles : les adresses telles que info@, sales@, admin@ et support@ sont généralement gérées par des équipes plutôt que par des individus. Elles génèrent des taux de réclamation plus élevés et sont généralement peu pertinentes pour les listes marketing. Une expression régulière ne permet pas de les identifier de manière fiable.
5. Pièges à spam : il s’agit d’adresses e-mail utilisées par les organismes de vérification de la délivrabilité pour identifier les expéditeurs dont les listes de diffusion sont de mauvaise qualité. Elles semblent tout à fait normales et passent la validation côté client, mais leur utilisation peut nuire à votre réputation d’expéditeur.

L'API de validation d'emails DeBounce détecte les cinq problèmes grâce à des vérifications en temps réel au niveau des boîtes aux lettres et à des données de validation mises à jour en continu. Pour maintenir la qualité des listes sur le long terme, outils de vérification des e-mails permet également de revérifier en masse les anciens contacts, ce qui permet de supprimer les adresses devenues invalides avec le temps.

Bonnes pratiques pour la validation des adresses e-mail en JavaScript

Une bonne validation des adresses e-mail utilise plusieurs contrôles simultanément pour améliorer la qualité des données, l'expérience utilisateur et la délivrabilité.

• Superposez les niveaux de validation : commencez par l’attribut `email` HTML5, ajoutez une expression régulière ou une bibliothèque de validation, puis utilisez un appel API pour la vérification au niveau de la boîte aux lettres. Chaque niveau détecte les problèmes que le précédent a manqués, tandis que les vérifications antérieures fournissent un retour d’information instantané sans attendre de requête réseau.
• Ne vous fiez jamais uniquement à la validation côté client pour les flux critiques en matière de sécurité : la validation basée sur le navigateur peut être contournée, les adresses électroniques doivent donc toujours être validées à nouveau sur le serveur avant de traiter les inscriptions, les achats ou la création de compte.
• Utilisez une bibliothèque ou une API éprouvée plutôt que de maintenir des expressions régulières personnalisées à long terme : les formats d’adresses e-mail évoluent. Une bibliothèque ou une API régulièrement mise à jour gère les nouveaux cas particuliers sans vous obliger à modifier vos propres modèles.
• Anti-rebond des appels d'API et fourniture d'un retour visuel clair : un indicateur de chargement pendant l'exécution de l'API, une coche verte en cas de succès et un message d'erreur précis en cas d'échec (« Vouliez-vous dire… ») [email protected]?”) permet de maintenir la réactivité du formulaire et de réduire le taux d’abandon.
• Résultats de la validation des journaux pendant le développement : les fournisseurs de messagerie jetables, les fautes de frappe répétées et les domaines suspects deviennent évidents une fois les journaux consultés, ce qui facilite le renforcement des règles de validation au fil du temps.
• Validez également au niveau de la liste : la validation en temps réel détecte les adresses invalides lors de l’inscription, tandis que Validation de la liste de courrier électronique permet de supprimer les adresses qui deviennent inactives par la suite.

Conclusion

La validation HTML5 vous offre gratuitement des contrôles de format de base. Les bibliothèques d'expressions régulières et de validation améliorent l'expérience utilisateur grâce à un retour d'information rapide côté client, tandis que les API vérifient si une boîte mail existe réellement et peut recevoir des e-mails.

Cette dernière étape est cruciale. La validation côté client ne suffit pas à garantir qu'une adresse est réelle, active ou sécurisée. Pour les formulaires d'inscription en production, où la délivrabilité et la qualité des listes sont essentielles, la validation par API empêche les adresses e-mail jetables, les noms de domaine erronés, les adresses génériques et autres contacts invalides d'intégrer votre base de données.

Le rebond API de validation des e-mails ajoute cette vérification au niveau de la boîte mail directement à votre processus d'inscription, contribuant ainsi à bloquer les adresses frauduleuses avant qu'elles n'affectent votre réputation d'expéditeur. Si vous souhaitez une configuration plus rapide, widget de validation JavaScript offre une méthode sans code pour ajouter une validation d'email en temps réel directement à vos formulaires.