Wie überprüft man die Korrektheit einer eingegebenen E-Mail mit JavaScript?

Wie überprüft man die Korrektheit einer eingegebenen E-Mail mit JavaScript?

Bevor ein Formular an den Server gesendet wird, muss häufig sichergestellt werden, dass alle Felder richtig ausgefüllt sind. Neben der Überprüfung, ob der Benutzer beispielsweise einen Namen, ein Passwort oder passende Passwörter eingegeben hat, kann die Validierung der E-Mail-Adresse eine besondere Herausforderung darstellen. Eine rein manuelle Überprüfung – beispielsweise das bloße Suchen nach den Zeichen „@“ und „.“ – reicht nicht aus, da viele fehlerhafte E-Mail-Adressen diese Bedingungen dennoch erfüllen können. Stattdessen bietet sich der Einsatz von regulären Ausdrücken (RegEx) an, um die E-Mail-Adresse kompakt und effizient zu validieren.

Grundlagen der E-Mail-Validierung mit regulären Ausdrücken

Reguläre Ausdrücke ermöglichen es, mit einer einzigen Zeichenkette alle gültigen Varianten einer E-Mail-Adresse abzubilden. Mit nur einer Funktion kann so geprüft werden, ob die eingegebene Adresse den festgelegten Mustern entspricht. Im folgenden Beispiel wird eine Funktion namens emailValidation() vorgestellt, die diesen Test übernimmt:

function emailValidation(value) {
let txt = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return txt.test(value);
}

Auch wenn das reguläre Ausdrucksmuster auf den ersten Blick kompliziert erscheint, deckt es eine Vielzahl an gültigen (und auch ungültigen) E-Mail-Formaten ab. Auf diese Weise werden Fehler wie falsche Platzierungen oder mehrfach vorkommende „@“-Zeichen vermieden.

Validierung beim Abschicken des Formulars

Eine typische Anwendung besteht darin, beim Abschicken eines Formulars die E-Mail-Adresse zu überprüfen und dem Benutzer sofort eine Rückmeldung zu geben. Dafür kann beispielsweise folgende Funktion genutzt werden:

function checkEmail() {
let email = document.form.email.value;

if (emailValidation(email)) {
window.alert("OK");
} else {
window.alert("Email is incorrect");
}
}

Wird checkEmail() aufgerufen, überprüft die Funktion mittels emailValidation(), ob die E-Mail-Adresse dem korrekten Muster entspricht. Bei Erfolg wird eine Erfolgsmeldung ausgegeben, andernfalls informiert ein Warnhinweis den Benutzer, dass die eingegebene E-Mail fehlerhaft ist.

Validierung „on the fly“ (Echtzeit-Überprüfung)

Statt die Prüfung erst beim Absenden des Formulars vorzunehmen, kann man den Validierungsvorgang auch direkt während der Eingabe ausführen. Dazu wird das Ereignis onKeyDown im Eingabefeld genutzt, um nach jedem über Tastatur eingegebenen Zeichen die Validierung erneut auszuführen und das Ergebnis in einem bestimmten Element (z. B. einem span-Tag) anzuzeigen. Hier ein Beispiel:

function checkEmail() {
let email = document.form.email.value;
if (emailValidation(email)) {
document.getElementById('span1').innerText = 'OK';
} else {
document.getElementById('span1').innerText = 'Email is incorrect';
}
}

Das zugehörige HTML-Eingabefeld könnte folgendermaßen aussehen:

<input type="text" name="email" id="email" onKeyDown="checkEmail();">

So wird dem Benutzer unmittelbar Rückmeldung zur Korrektheit der eingegebenen E-Mail gegeben, noch bevor das Formular abgeschickt wird.

Weitere Validierungen: Telefonnummern

Neben der E-Mail-Validierung lassen sich ähnliche Ansätze auch für andere Felder, wie beispielsweise die Telefonnummer, anwenden. Für eine Telefonnummer im internationalen Format könnte eine Funktion so aussehen:

function phoneValidation(value) {
return /^+\d{1,2}(\d{3})\d{3}-\d{2}-\d{2}$/.test(value);
}

Auch hier wird ein regulärer Ausdruck verwendet, um sicherzustellen, dass die eingegebene Nummer dem gewünschten Format entspricht.

Hinweise zur Validierung

Es ist wichtig zu beachten, dass Überprüfungen mittels regulärer Ausdrücke lediglich die Form und das Muster der E-Mail-Adresse bzw. Telefonnummer kontrollieren. Eine funktionierende Adresse muss nicht zwangsläufig auch existieren. Die Validierung bezieht sich also auf die Syntax, während die Existenz bzw. Erreichbarkeit einer E-Mail nur durch den Versand und Empfang einer Nachricht verifiziert werden kann. Für weiterführende Prüfungen, wie etwa ob eine E-Mail-Adresse bereits registriert ist, kommen serverseitige Prüfungen oder AJAX-basierte Abfragen in Betracht.

Fazit

Die Überprüfung der Richtigkeit einer eingegebenen E-Mail-Adresse mit JavaScript wird vor allem dank regulärer Ausdrücke deutlich vereinfacht. Anstatt den Code mit zahlreichen if-Bedingungen zu überfrachten, übernimmt ein einzelner, gut formulierter RegEx-Filter diese Aufgabe effizient und kompakt. Dank Funktionen wie emailValidation() und checkEmail() kann die Validierung einfach integriert und – bei Bedarf – auch in Echtzeit durchgeführt werden. Ebenso können ähnliche Ansätze für die Validierung anderer Eingabefelder angewendet werden, sodass Benutzer sofort Rückmeldung zu ihren Eingaben erhalten und fehlerhafte Daten gar nicht erst an den Server gesendet werden.

Diese Techniken helfen nicht nur dabei, die Benutzerfreundlichkeit zu erhöhen, sondern auch den Server zu entlasten und die Qualität der empfangenen Daten sicherzustellen.