Validateur regex JavaScript d'e-mail

Qu'est-ce que le regex d'e-mail ?

Le regex d'e-mail est une expression régulière conçue pour vérifier si une chaîne correspond au format d'une adresse e-mail valide, comme user@example.com.

Il permet de garantir :

• Que la partie locale (avant @) est valide

• Que le domaine (après @) est correctement structuré

• Que l'e-mail utilise des caractères autorisés et des TLD valides

Il est important de savoir que la validation par regex a ses limites. Un bon regex peut confirmer qu'un e-mail semble correct, mais il ne peut pas vérifier si le TLD est réel et reconnu. Pour une validation complète, un deuxième contrôle contre la liste officielle des TLD de l'IANA est recommandé.

Quel est le standard officiel pour les adresses e-mail ?

Le standard officiel est le RFC 2822. Il définit toutes les règles, incluant les caractères autorisés, la structure de la partie locale et du domaine, ainsi que certains cas limites particuliers.

Pattern regex d'e-mail en JavaScript

Voici un pattern couramment utilisé pour la validation d'e-mail de base :

/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/

Décomposition du pattern :

• ^[a-zA-Z0-9._%+-]+ : Partie locale (nom d'utilisateur)

• @ : Signe arobase littéral

• [a-zA-Z0-9.-]+ : Nom de domaine

• \.[a-zA-Z]{2,}$ : Domaine de premier niveau (ex. .com, .org)

Sensibilité à la casse dans la validation d'e-mail

Techniquement, la partie locale d'une adresse e-mail (tout avant l'arobase) peut être sensible à la casse. Cependant, dans la pratique, presque tous les grands fournisseurs d'e-mail traitent les adresses comme insensibles à la casse. Pour la plupart des applications, traiter les e-mails comme insensibles à la casse est sûr. Convertissez-les en minuscules pour stocker et comparer.

Patterns simples pour détecter les erreurs évidentes

Parfois, vous voulez simplement détecter les erreurs les plus flagrantes, comme un arobase manquant ou un domaine absent. Un pattern plus simple peut suffire pour ces cas.

Exemple de code 1 : Validation d'e-mail basique

const email = "hello@example.com";
const pattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
console.log(pattern.test(email)); // true

Exemple de code 2 : Valider plusieurs e-mails

const emails = ["admin@gmail.com", "user@site.co", "invalid@.com"];
const isValidEmail = (email) => /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/.test(email);
emails.forEach(email => {
console.log(${email} : ${isValidEmail(email)});
});

Exemple de code 3 : Validation en temps réel dans un formulaire

<input type="text" id="emailInput" placeholder="Entrez votre e-mail">
<p id="message"></p>
<script>
document.getElementById("emailInput").addEventListener("input", function () {
const email = this.value;
const pattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/;
document.getElementById("message").textContent =
pattern.test(email) ? "Email valide" : "Email invalide";
});
</script>

Exemple de code 4 : Validation d'e-mail avec jQuery

Si vous utilisez jQuery, vous pouvez profiter de plugins de validation tiers comme jQuery Validation pour gérer les vérifications d'e-mail sans effort.

Où trouver des TLD valides pour la validation d'e-mails

Pour renforcer la précision de votre validation, vérifiez les TLD contre la liste officielle maintenue par l'IANA (Internet Assigned Numbers Authority). Cette liste est disponible publiquement sur la base de données de la zone racine IANA.

HTML vs JavaScript : approches de validation d'e-mail

Validation HTML native

Avec HTML5, vous pouvez simplement utiliser <input type="email">. Le navigateur vérifie si la valeur saisie ressemble à un format e-mail valide.

• Avantages : Configuration minimale, retour instantané, pris en charge par les navigateurs modernes

• Inconvénients : Les règles du navigateur peuvent être trop permissives, non personnalisable pour des règles strictes

Validation regex JavaScript

JavaScript vous permet de définir exactement ce que vous souhaitez avec des expressions régulières.

• Avantages : Entièrement personnalisable, peut se combiner avec une logique côté serveur

• Inconvénients : Nécessite d'écrire et de maintenir du code

Cas d'utilisation

• Formulaires de connexion et d'inscription : Validez les saisies utilisateur en frontend avant soumission.

• Outils de collecte d'e-mails : Filtrez les adresses malformées avant de les stocker.

• Plateformes marketing : Assurez des données propres et exploitables pour les campagnes.

• API : Validez les champs e-mail des payloads dans la logique frontend avant envoi au serveur.

Pourquoi les e-mails de vérification sont-ils importants ?

Même les patterns regex les plus sophistiqués ne peuvent que vérifier si une adresse e-mail semble correcte. La vérification par e-mail confirme qu'un lien réel existe entre l'utilisateur et l'adresse fournie, garantissant la propriété, améliorant la qualité des données, protégeant la sécurité et améliorant la délivrabilité.

Conseils pro

• Évitez les regex trop complexes sauf si nécessaire, ils peuvent bloquer des e-mails valides en cas limite.

• Ne vous appuyez pas uniquement sur le regex. Utilisez la validation côté serveur pour les cas limites.

• Le regex ne valide pas l'existence du domaine, uniquement la structure. Utilisez des vérifications DNS si nécessaire.

• Pour les e-mails internationaux avec Unicode, utilisez un regex plus avancé avec des flags Unicode.

• Toujours supprimer les espaces avant la validation, même un espace en fin de chaîne peut faire échouer un e-mail valide.

Bibliothèques de validation d'e-mails avancées pour JavaScript

Si vous avez besoin d'une validation plus stricte en JavaScript, plusieurs bibliothèques tierces robustes sont disponibles :

• email-addresses (https://www.npmjs.com/package/email-addresses) : Analyse et valide même les adresses les plus complexes.

• validator.js (https://www.npmjs.com/package/validator) : Offre la fonction isEmail avec support RFC et internationalisation.

• mailchecker (https://www.npmjs.com/package/mailchecker) : Détecte les e-mails jetables ou temporaires.

Stocker les e-mails en minuscules : pourquoi c'est important

Sauvegarder toutes les adresses e-mail en minuscules simplifie la recherche et la comparaison, réduit les doublons et permet d'alléger les patterns regex. En pratique, convertir les e-mails en minuscules est pratique, convivial et facilite le développement.

Associez-le à ces outils

• Testeur regex JavaScript : Construisez et déboguez vos patterns e-mail en JavaScript.

• Validateur regex JavaScript de numéros de téléphone : Utilisez avec des formulaires collectant e-mail et coordonnées.

• Validateur regex JavaScript d'UUID : Associez des adresses e-mail à des identifiants uniques.

• Encodeur base64 : Encodez des données e-mail avant transmission.

• Générateur de tokens : Combinez des e-mails vérifiés avec des tokens pour les liens de vérification.