E-Mail-Regex-JavaScript-Validator

Was ist E-Mail-Regex?

E-Mail-Regex ist ein regulärer Ausdruck, der prüft, ob ein String dem Format einer gültigen E-Mail-Adresse entspricht, wie user@example.com.

Er stellt sicher, dass:

• Der lokale Teil (vor @) gültig ist

• Die Domain (nach @) korrekt strukturiert ist

• Die E-Mail erlaubte Zeichen und TLDs verwendet

Regex-basierte Validierung hat jedoch ihre Grenzen. Ein gutes regex kann zwar bestätigen, dass eine E-Mail korrekt aussieht, aber es kann nicht prüfen, ob die TLD eine real existierende ist. Für die meisten Anwendungsfälle ist regex ein hilfreicher erster Filter, der mit einer TLD-Prüfung kombiniert werden sollte.

Was ist der offizielle E-Mail-Adressstandard?

Der offizielle Standard, der die Formatierung von E-Mail-Adressen definiert, ist RFC 2822. Er legt alle Regeln fest, einschließlich der erlaubten Zeichen, der Strukturierung des lokalen Teils und der Domain sowie einiger ungewöhnlicher Edge-Cases.

In der Praxis müssen Sie die 40+ Seiten von RFC 2822 nicht auswendig kennen. Wenn Sie E-Mails so streng wie möglich validieren möchten, können Sie ein RFC 2822-abgeleitetes regex-Muster verwenden. Der Haken: Die vollständige Spezifikation via regulären Ausdrücken umzusetzen führt zu einem Monster-Muster.

E-Mail-Regex-Muster in JavaScript

Hier ist ein häufig verwendetes Muster zur grundlegenden E-Mail-Validierung:

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

Muster-Aufschlüsselung:

• ^[a-zA-Z0-9._%+-]+ steht für den lokalen Teil (Benutzername)

• @ ist das Literal "@"-Zeichen

• [a-zA-Z0-9.-]+ entspricht dem Domain-Namen

• \.[a-zA-Z]{2,}$ entspricht der Top-Level-Domain (z. B. .com, .org)

Groß-/Kleinschreibung bei der E-Mail-Validierung

Technisch gesehen kann der lokale Teil einer E-Mail-Adresse (alles vor dem "@") groß- und kleinschreibungssensitiv sein. In der Praxis behandeln jedoch fast alle großen E-Mail-Anbieter Adressen als groß- und kleinschreibungsunabhängig. Für die meisten Anwendungen ist es sicher, E-Mails als groß- und kleinschreibungsunabhängig zu behandeln. Beim Speichern oder Vergleichen von E-Mails sollten Sie diese in Kleinbuchstaben umwandeln.

Code-Beispiel 1: Grundlegende E-Mail-Validierung

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

Code-Beispiel 2: Mehrere E-Mails validieren

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)});
});

Code-Beispiel 3: Echtzeit-Validierung in einem Formular

<input type="text" id="emailInput" placeholder="Geben Sie Ihre E-Mail ein">
<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) ? "Gültige E-Mail" : "Ungültige E-Mail";
});
</script>

HTML vs. JavaScript: Ansätze zur E-Mail-Validierung

Integrierte HTML-Validierung

Mit HTML5 können Sie einfach <input type="email"> in Ihren Formularen verwenden. Der Browser prüft dann, ob die Eingabe wie eine gültige E-Mail-Adresse aussieht.

• Vorteile: Minimales Setup, sofortiges Feedback, wird von modernen Browsern unterstützt

• Nachteile: Browser-Regeln können zu permissiv sein; nicht anpassbar für strengere Regeln

JavaScript-Regex-Validierung

JavaScript ermöglicht es Ihnen, mit regulären Ausdrücken genau zu definieren, was Sie wollen. Sie können bestimmte Domain-Beschränkungen erzwingen, erlaubte Zeichen einschränken oder sogar asynchrone Prüfungen durchführen.

• Vorteile: Vollständig anpassbar; kann mit serverseitiger Logik kombiniert werden

• Nachteile: Erfordert das Schreiben und Pflegen von Code

Wo gültige TLDs für die E-Mail-Validierung zu finden sind

Regex kann bestätigen, dass eine E-Mail-Adresse strukturell korrekt ist, aber nicht, ob die TLD gültig oder in Verwendung ist. Um die Genauigkeit Ihrer Validierung zu steigern, prüfen Sie gegen die offizielle, aktuelle TLD-Liste der IANA Root Zone Database.

Warum Verifizierungs-E-Mails wichtig sind

Selbst die ausgefeiltesten regex-Muster können nur sagen, ob eine E-Mail-Adresse korrekt aussieht, aber nicht garantieren, dass die Person, die sie eingibt, tatsächlich Zugang zu diesem Posteingang hat. Genau hier setzt die E-Mail-Verifizierung an.

Wenn Sie eine Verifizierungs-E-Mail senden, bestätigen Sie eine reale Verbindung zwischen dem Benutzer und der angegebenen Adresse. Dies stellt sicher, dass:

• Die Eigentümerschaft bestätigt wird: Nur die Person mit Zugang zur E-Mail kann den Link anklicken.

• Die Datenqualität verbessert wird: Sie vermeiden das Sammeln unbrauchbarer oder falsch eingetippter E-Mails.

• Die Sicherheit geschützt wird: Verhindert, dass Bots und böswillige Akteure gefälschte Konten registrieren.

Profi-Tipps

• Vermeiden Sie übermäßig komplexe regex, wenn es nicht notwendig ist; es kann gültige Edge-Case-E-Mails blockieren.

• Verlassen Sie sich nicht nur auf regex. Verwenden Sie serverseitige Validierung, um Edge-Cases abzufangen und vor Injection zu schützen.

• Regex validiert nicht die Existenz der Domain, nur die Struktur. Verwenden Sie DNS-Lookups, wenn nötig.

• Leerzeichen trimmen vor der Validierung; selbst ein Leerzeichen am Ende kann eine gültige E-Mail scheitern lassen.

Wichtig: Verlassen Sie sich niemals ausschließlich auf JavaScript für die E-Mail-Validierung. JavaScript kann von Benutzern deaktiviert oder umgangen werden. Kombinieren Sie clientseitige Validierung immer mit robuster serverseitiger Validierung.

Häufige Fallstricke vermeiden

Häufige Probleme sind:

• Führende oder abschließende Leerzeichen (z. B. " user@site.com")

• Doppelte Punkte in der Adresse (z. B. "user..name@site.com")

Um diese zu behandeln, trimmen Sie immer Ihre Eingabe und erwägen Sie eine zusätzliche Prüfung auf doppelte Punkte oder Leerzeichen.

Erweiterte E-Mail-Validierungsbibliotheken für JavaScript

Für eine strengere E-Mail-Validierung in JavaScript gibt es robuste Drittanbieterbibliotheken:

• email-addresses: Parst und validiert selbst die komplexesten Adressen gemäß aktuellen Spezifikationen.

• validator.js: Bietet die isEmail-Funktion mit RFC-Konformität und internationalisierten E-Mail-Adressen.

• mailchecker: Erkennt Wegwerf-, gefälschte oder temporäre E-Mails zusätzlich zur Strukturvalidierung.

Profi-Tipp: Verwenden Sie diese Bibliotheken nach Möglichkeit im Backend. Clientseitige Validierung ist für die Benutzererfahrung hilfreich, aber führen Sie immer eine gründlichere Prüfung serverseitig durch.

E-Mails in Kleinbuchstaben speichern: Warum es wichtig ist

Das Speichern aller E-Mail-Adressen in Kleinbuchstaben vereinfacht sowohl die Suche als auch den Vergleich. Die meisten modernen Systeme behandeln E-Mails als groß- und kleinschreibungsunabhängig. Durch die Umwandlung in Kleinbuchstaben:

• Reduzieren Sie doppelte Einträge.

• Beschleunigen Sie Suchen, Lookups und Validierungen.

• Können regex-Muster oft mit dem Flag i schlanker gestaltet werden.

Verwendete Metazeichen

• ^: Verankert das Muster am Anfang des Strings

• $: Verankert am Ende des Strings

• +: Passt auf eines oder mehr des vorherigen Tokens

• .: Passt auf einen Literal-Punkt, wenn escaped

• []: Zeichenklasse zum Treffen bestimmter Zeichen

• </code>: Escape-Zeichen

Anwendungsfälle

• Login- und Anmeldeformulare: Benutzereingaben im Frontend vor der Übermittlung validieren.

• E-Mail-Sammeltools: Fehlerhafte Adressen vor dem Speichern herausfiltern.

• Marketing-Plattformen: Saubere, verwendbare Daten für Kampagnen sicherstellen.

• APIs: E-Mail-Felder in Payload vor dem Senden an den Server im Frontend validieren.

Kombinieren Sie dieses Tool mit

• JavaScript-Regex-Tester: E-Mail-Muster live in JavaScript erstellen und debuggen.

• Telefonnummer-Regex-JavaScript-Validator: Für Formulare, die sowohl E-Mail als auch Kontaktdaten erfassen.

• UUID-Regex-JavaScript-Validator: E-Mail-Adressen mit eindeutigen Kennungen kombinieren.

• Base64 Encoder: E-Mail-Daten vor der Übertragung kodieren.

• Token-Generator: Verifizierte E-Mails mit Tokens für Verifizierungslinks oder Anmelde-Flows kombinieren.