Validation d'email en JavaScript : comment ça fonctionne sous le capot (analyse de code)

Comment valider un email en JavaScript : de l'expression régulière simple à l'analyse complète sous le capot

Chaque développeur a rencontré au moins une fois la question : « How can I validate an email address in JavaScript? ». Cette question sur Stack Overflow a recueilli des milliers de vues et des centaines de réponses, car le sujet est un véritable nœud de nuances. Aujourd'hui, nous ne nous contentons pas de donner un code prêt à l'emploi, mais nous regardons sous le capot : nous analysons pourquoi une simple vérification peut laisser passer a@b ou bloquer "test@[IPv6:2001:db8::1]". C'est parti !

Pourquoi « simple regex » est une mauvaise idée ?

La solution la plus populaire sur Internet est de copier une expression régulière. Mais soyons honnêtes : les adresses email sont un chaos. Les spécifications RFC 5321 et RFC 5322 permettent d'utiliser les caractères +, -, ., % et même des commentaires entre parenthèses. Et il y a aussi des domaines comme museum ou @[192.168.1.1]. Essayez de mettre tout cela dans une seule ligne de regex — et vous laisserez passer une adresse valide ou vous bloquerez un véritable utilisateur.

Voici un exemple que l'on trouve souvent sur Stack Overflow :

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

Ce code fonctionne pour 90% des cas, mais :

\n
• Il laisse passer test@localhost (valide pour un réseau local)
\n
• Il bloque "test@[192.168.1.1]" (valide selon la RFC)
\n
• Il ne vérifie pas la longueur du domaine ni la présence de points
\n

Morale : n'essayez pas d'écrire une regex parfaite. Il est préférable d'utiliser une combinaison de vérification simple + validation côté serveur.

Anatomie d'une adresse email : ce qu'il faut savoir avant d'écrire du code

Avant d'écrire un validateur, analysons la structure d'un email selon la spécification :

\n
• Partie locale (avant @) : peut contenir des lettres, des chiffres, des points, des plus, des tirets, mais ne peut pas commencer ni se terminer par un point. Les guillemets sont autorisés pour les caractères spéciaux.
\n
• Domaine (après @) : se compose d'étiquettes séparées par des points. Chaque étiquette fait de 1 à 63 caractères. Le domaine peut être une adresse IP entre crochets.
\n
• Longueur totale : pas plus de 254 caractères.
\n

En sachant cela, nous pouvons écrire une vérification plus pertinente.

Étape 1 : Validation simple mais fonctionnelle (pour 99% des cas)

Commençons par le code utilisé dans les projets réels (par exemple, dans Angular ou React). Il n'est pas parfait, mais suffisant pour la plupart des formulaires :

function isEmailSimple(email) {\n    // Supprimer les espaces\n    const trimmed = email.trim();\n    \n    // Vérification de chaîne vide\n    if (!trimmed) return false;\n    \n    // Structure de base : quelque chose @ quelque chose . quelque chose\n    const atIndex = trimmed.lastIndexOf('@');\n    if (atIndex < 1 || atIndex === trimmed.length - 1) return false;\n    \n    const localPart = trimmed.slice(0, atIndex);\n    const domain = trimmed.slice(atIndex + 1);\n    \n    // Le domaine doit contenir au moins un point\n    const dotIndex = domain.lastIndexOf('.');\n    if (dotIndex < 1 || dotIndex === domain.length - 1) return false;\n    \n    // Vérification de la longueur\n    if (trimmed.length > 254) return false;\n    if (localPart.length > 64) return false;\n    \n    return true;\n}\n\n// Exemples :\nconsole.log(isEmailSimple('user@example.com')); // true\nconsole.log(isEmailSimple('a@b.c')); // true (formellement valide)\nconsole.log(isEmailSimple('user@localhost')); // false (pas de point)\nconsole.log(isEmailSimple('@example.com')); // false\n

Ce code est déjà meilleur qu'une regex aveugle. Il vérifie la structure, la longueur et la présence de @ avec un point. Mais il laisse passer user@[192.168.1.1] — pour la plupart des formulaires web, ce n'est pas critique.

Étape 2 : Validation avancée conforme à la RFC (presque comme dans le navigateur)

Les navigateurs modernes utilisent une validation intégrée via l'attribut type="e