Die Standardformeln von Google Tabellen prüfen lediglich die E-Mail-Syntax; sie können nicht bestätigen, ob ein Postfach tatsächlich existiert, was aber für die... entscheidend ist.
Wichtige Erkenntnisse
- Clientseitiges JavaScript, egal ob HTML5-Attribute, reguläre Ausdrücke oder Bibliotheken, kann lediglich das E-Mail-Format bestätigen. Es kann weder die Existenz eines Postfachs noch die Zustellbarkeit einer Adresse überprüfen.
- Für die JavaScript-E-Mail-Validierung ist die effektivste Methode die Kombination mehrerer Methoden: HTML5-Attribut als Basis, reguläre Ausdrücke für sofortiges Feedback und ein API-Aufruf zur Bestätigung der Existenz des Postfachs vor dem Absenden des Formulars.
- Eine E-Mail-Validierungs-API erkennt, was keine clientseitige Methode kann: Tippfehler in realistisch aussehenden Domains, Wegwerfadressen, Catch-All-Domains, rollenbasierte Konten und Spamfallen.
Um die 30% Innerhalb eines Jahres werden bis zu 10 % der E-Mail-Adressen ungültig. Sind mehr als 10 % Ihrer Liste ungültig, werden weniger als 44 % Ihrer E-Mails zugestellt. Viele dieser ungültigen Adressen gelangen über Formulare mit unzureichender Validierung in Datenbanken.
Die E-Mail-Validierung in JavaScript funktioniert mehrschichtig. Die Überprüfung der korrekten Formatierung einer Adresse ist relativ einfach. Die Bestätigung, dass die Domain E-Mails empfangen kann, ist komplexer, aber dennoch möglich. Schwieriger ist es, zu überprüfen, ob das Postfach tatsächlich existiert und Nachrichten empfangen kann. Browserbasiertes JavaScript allein kann dies nicht leisten.
Die Validierung erfolgt üblicherweise auf drei Ebenen: Syntax, Domain und Postfach. JavaScript eignet sich gut für Syntaxprüfungen, während Bibliotheken und APIs bei der Domainverifizierung helfen können. Die Postfachverifizierung erfordert jedoch eine serverseitige API-Anfrage, da der Browser nicht direkt bestätigen kann, ob ein Postfach existiert.
Methoden zur E-Mail-Validierung in JavaScript
Jede der folgenden Methoden fügt Ihrem Validierungsprotokoll eine weitere Ebene hinzu. Sie sind von der einfachsten zur umfassendsten Methode geordnet. Die meisten Produktionsanwendungen verwenden mindestens zwei, während sicherheitskritische Registrierungsprozesse alle vier nutzen.
1. Das HTML5-Attribut type="email".
Der einfachste Einstiegspunkt für die E-Mail-Validierung mit JavaScript ist das HTML5-Attribut `type="email"` Ihres Eingabeelements. Browser führen beim Absenden des Formulars automatisch eine grundlegende Formatvalidierung durch.
E-Mail-Adresse
Einreichen
Der Browser prüft vor dem Absenden, ob das Feld ein @-Symbol und eine domänenähnliche Zeichenkette enthält. Die Validierung wird standardmäßig beim Absenden ausgeführt.
Die HTML5-Prüfung ist jedoch sehr einfach. Sie akzeptiert Adressen wie a@b oder user@domain, obwohl diese niemals echte E-Mails empfangen würden. Außerdem bietet sie kein Live-Feedback während der Eingabe. Verwenden Sie sie daher nur als Ausgangspunkt: Integrieren Sie sie immer, aber verlassen Sie sich niemals ausschließlich darauf.
2. Validierung mit einem Regex-Muster
Reguläre Ausdrücke (Regex) sind die gängigste JavaScript-Methode zur E-Mail-Validierung. Sie ermöglichen eine Formatprüfung, die bei Bedarf vor dem Absenden des Formulars ausgeführt wird und sofortiges Feedback liefert.
Hier ist ein einfacher regulärer Ausdruck, der die gängigsten gültigen Formate abdeckt:
function isValidEmail(email) {
const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return regex.test(email);
}
// Verwendung
console.log(isValidEmail(“[E-Mail geschützt] ")); // WAHR
console.log(isValidEmail(“notanemail”)); // false
Das Muster verstehen:
- ^ — Anfang der Zeichenkette
- [^\s@]+ — ein oder mehrere Zeichen, die weder Leerzeichen noch @ sind
- @ — das wörtliche @-Symbol
- [^\s@]+ — ein oder mehrere Zeichen nach @ (der Domäne)
- — ein buchstäblicher Punkt
- [^\s@]+$ — ein oder mehrere Zeichen nach dem Punkt (die Top-Level-Domain)
Für eine strengere Validierung gemäß RFC 5322 können Sie ein spezifischeres Muster verwenden:
function 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,}$/;
return regex.test(email);
}
Durch das Einbetten des regulären Ausdrucks in eine wiederverwendbare Funktion wie isValidEmail() bleibt die Validierungslogik an einem Ort und lässt sich leicht aktualisieren.
Die größte Einschränkung besteht darin, dass reguläre Ausdrücke nur das Format prüfen. Sie können nicht feststellen, ob eine Domain existiert oder ob ein Postfach echt ist. Eine Adresse wie [E-Mail geschützt] Die E-Mail wird trotzdem erfolgreich sein, da das Format gültig aussieht, auch wenn die Domain ein Tippfehler ist und die E-Mail wahrscheinlich nie zugestellt wird.
3. Verwendung einer JavaScript-Validierungsbibliothek
Etablierte Bibliotheken wie validator.js decken viele Fälle ab, die mit einfachen regulären Ausdrücken nicht erfasst werden, darunter internationale Domains, ungewöhnliche, aber gültige E-Mail-Formate und neuere Domain-Endungen. Wenn Ihre Anwendung bereits ein Validierungsframework verwendet, ist eine Bibliothek die elegantere Wahl im Vergleich zur Pflege eigener regulärer Ausdrücke.
Installieren Sie validator.js:
npm install validator
Verwenden Sie es in Ihrem Code:
import validator from 'validator';
function isValidEmail(email) {
return validator.isEmail(email);
}
// Verwendung
console.log(isValidEmail(“[E-Mail geschützt] ")); // WAHR
console.log(isValidEmail(“[E-Mail geschützt] ")); // FALSCH
console.log(isValidEmail(“user@example”)); // false
Die Methode validator.isEmail() führt eine umfassendere Formatprüfung durch als ein einfacher regulärer Ausdruck und erkennt viele häufige Formatierungsprobleme.
Die Einschränkung bleibt jedoch dieselbe: Bibliotheken prüfen nur die Struktur, nicht die Zustellbarkeit. Eine Adresse wie [E-Mail geschützt] Die Methode funktioniert weiterhin, da das Format technisch korrekt ist. Für produktive Anmeldeprozesse, bei denen die Listenqualität wichtig ist, benötigt diese Methode zusätzlich einen API-Aufruf.
4. Validierung mit einer E-Mail-Validierungs-API
Nur ein API-basierter Ansatz kann die tatsächliche Existenz eines Postfachs bestätigen. Die bisher beschriebenen Methoden überprüfen lediglich das Format einer E-Mail-Adresse. Eine API prüft hingegen, ob die Adresse tatsächlich E-Mails empfangen kann.
Das DeBounce-E-Mail-Validierungs-API Prüft Syntax, MX-Einträge der Domain, Existenz von Postfächern, Status von Wegwerfadressen, Rollenkonten und das Verhalten von Catch-All-Domains – alles mit einem einzigen API-Aufruf. Hier ist ein Beispiel mit fetch() in JavaScript:
async function validateEmailWithAPI(email) {
const apiKey = 'YOUR_DEBOUNCE_API_KEY';
const url = `https://api.debounce.io/v1/?api=${apiKey}&email=${encodeURIComponent(email)}`;
versuche {
const response = await fetch(url);
const data = Warten auf Antwort.json();
Rückkehr {
Ergebnis: data.debounce?.result,
Grund: data.debounce?.reason,
free_email: data.debounce?.free_email === “true” || data.debounce?.free_email === true,
did_you_mean: data.debounce?.did_you_mean,
Rolle: data.debounce?.role === “true” || data.debounce?.role === true
};
} Fang (Fehler) {
console.error('Validierungsfehler:', error);
Null zurückgeben;
}
}
Für Entwickler sind die Antwortfelder am wichtigsten:
- Ergebnis – das Urteil auf höchster Ebene: „Sicher zu senden“, „Risikoreich“ oder „Ungültig“
- Grund – die konkrete Feststellung: Liefergegenstand, Wegwerfartikel, Auffangartikel, Syntaxfehler usw.
- did_you_mean — eine korrigierte Adresse, falls die API einen häufigen Tippfehler erkennt (z. B. gmial.com → gmail.com)
- free_email – ob die Adresse zu einem kostenlosen Anbieter wie Gmail oder Yahoo gehört.
Speziell für die clientseitige Erkennung von Wegwerf-E-Mail-Adressen bietet DeBounce auch eine kostenlose API für Wegwerf-E-Mail-Adressen die Sie direkt vom Browser aus aufrufen können, ohne Ihren Haupt-API-Schlüssel preiszugeben.
Wenn Sie lieber gar keinen Code schreiben möchten, JavaScript-Validierungs-Widget Die Installation erfolgt mit einem einzigen Skript-Tag und die Validierung wird direkt in Ihren Formularen ohne zusätzlichen Integrationsaufwand durchgeführt.
Implementierung der E-Mail-Validierung in Echtzeit
Die E-Mail-Validierung in Echtzeit verbessert sowohl die Benutzerfreundlichkeit als auch die Datenqualität, da Benutzer Fehler sofort korrigieren können, anstatt bis zum Absenden des Formulars zu warten. Wichtig ist dabei, das richtige Ereignis für die jeweilige Validierungsart auszuwählen.
Die `oninput`-Methode wird bei jedem Tastendruck ausgelöst und eignet sich daher für schnelle Prüfungen wie die Validierung mit regulären Ausdrücken. Die `onchange`-Methode wird ausgelöst, nachdem das Feld den Fokus verloren hat, und ist daher besser für die API-Validierung geeignet, da sie wartet, bis der Benutzer die Eingabe abgeschlossen hat, bevor eine Anfrage gesendet wird.
Hier ist ein einfaches Echtzeit-Setup mit oninput und einer Regex-Prüfung:
const emailInput = document.getElementById('email');
const feedbackEl = document.getElementById('email-feedback');
emailInput.addEventListener('input', function () {
const email = this.value;
if (email.length === 0) {
feedbackEl.textContent = ”;
this.classList.remove('valid', 'invalid');
zurück;
}
if (isValidEmail(email)) {
this.classList.add('valid');
this.classList.remove('invalid');
feedbackEl.textContent = '✓ Sieht gut aus';
} Else {
this.classList.add('invalid');
this.classList.remove('valid');
feedbackEl.textContent = 'Bitte geben Sie eine gültige E-Mail-Adresse ein';
}
});
Bei Verwendung einer API-Methode sollte der Aufruf entprellt werden, indem 300–500 ms gewartet wird, bis der Benutzer mit dem Tippen pausiert hat, bevor die Anfrage gesendet wird. Dadurch wird vermieden, dass für jeden Teilanschlag ein API-Aufruf gesendet wird.
let debounceTimer;
emailInput.addEventListener('input', function () {
clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => {
validateEmailWithAPI(this.value).then(result => {
if (result?.did_you_mean) {
feedbackEl.textContent = `Meinten Sie ${result.did_you_mean}?`;
}
});
}, 400);
});
Gutes Echtzeit-Feedback ist klar und präzise. „Meinten Sie …?“ [E-Mail geschützt] Ein Fragezeichen ist hilfreich, während allgemeine Meldungen wie „Ungültige E-Mail-Adresse“ die Nutzer frustrieren und zu vermehrten Formularabbrüchen führen.
E-Mail-Validierung in gängigen JavaScript-Frameworks
Formularbibliotheken auf Framework-Ebene übernehmen die Zustandsverwaltung, die Fehleranzeige und die Übermittlungslogik, sodass das Einbinden von Validierungen in der Regel bedeutet, eine Regel anzugeben, anstatt Ereignisse manuell zu verknüpfen.
Reagiere mit React Hook Form:
import { useForm } from 'react-hook-form';
export default function SignupForm() {
const { register, handleSubmit, formState: { errors } } = useForm();
Rückkehr (
console.log(data))}>
{…register('email', {
Erforderlich: 'E-Mail-Adresse erforderlich',
Muster: {
Wert: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
Meldung: „Geben Sie eine gültige E-Mail-Adresse ein.“
}
})}
/>
{errors.email && {errors.email.message} }
Melden Sie sich an
);
}
Vue mit VeeValidate:
import { useField, useForm } from 'vee-validate';
Standard exportieren {
aufstellen() {
const { handleSubmit } = useForm();
const { value: email, errorMessage } = useField('email', (val) => {
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val) || 'Geben Sie eine gültige E-Mail-Adresse ein';
});
const onSubmit = handleSubmit(values => console.log(values));
return { email, errorMessage, onSubmit };
}
};
Schema-Validierung mit Zod oder Yup (nützlich, wenn Sie die Validierungslogik zwischen Client und Server teilen möchten):
import { z } from 'zod';
const emailSchema = z.string().email('Geben Sie eine gültige E-Mail-Adresse ein');
function validateEmail(email) {
const result = emailSchema.safeParse(email);
return result.success ? null : result.error.issues[0].message;
}
In allen drei Fällen übernimmt das Framework die Einrichtung, während Sie die Validierungsregel angeben. Wenn Sie den regulären Ausdruck später durch einen API-Aufruf ersetzen, bleibt die Gesamtstruktur weitgehend gleich.
Die Grenzen der clientseitigen E-Mail-Validierung
Die clientseitige Validierung kann zwar prüfen, ob eine E-Mail-Adresse gültig aussieht, aber nicht, ob sie tatsächlich funktioniert. Hier sind einige Probleme, die JavaScript allein nicht erkennen kann.
- Tippfehler in realistisch aussehenden Domains: Adressen wie [E-Mail geschützt] , [E-Mail geschützt] den [E-Mail geschützt] Die Formatprüfung wird bestanden, obwohl die Domains falsch geschrieben sind. Die E-Mail erreicht den Empfänger nie, und die Adresse bleibt in Ihrer Liste, was zu Bounces führt.
- Wegwerf- und temporäre E-Mail-Adressen: Dienste wie 10minutemail.com und guerrillamail.com erstellen temporäre Postfächer, die die Validierungsprüfung bestehen. Nutzer geben diese oft ein, um Anmeldeformulare zu umgehen; die Adresse verschwindet dann kurz darauf.
- Catch-All-Domains: Manche Domains sind so konfiguriert, dass sie jede an sie gesendete E-Mail annehmen, unabhängig davon, ob das jeweilige Postfach existiert. Eine Adresse auf einer Catch-All-Domain besteht die Formatprüfung, die MX-Prüfung und sogar einige SMTP-Prüfungen, ist aber in der Praxis dennoch unzustellbar.
- Rollenbasierte Adressen: Adressen wie info@, sales@, admin@ und support@ werden üblicherweise von Teams und nicht von Einzelpersonen verwaltet. Sie führen zu höheren Beschwerderaten und eignen sich daher in der Regel nicht für Marketinglisten. Ein regulärer Ausdruck kann sie nicht zuverlässig identifizieren.
- Spamfallen: Hierbei handelt es sich um E-Mail-Adressen, die von Zustellbarkeitsorganisationen verwendet werden, um Absender mit mangelhafter Listenhygiene zu identifizieren. Sie sehen völlig normal aus und bestehen die clientseitige Validierung, aber das Senden von E-Mails an diese Adressen kann Ihre Absenderreputation schädigen.
Die DeBounce-E-Mail-Validierungs-API erkennt alle fünf Probleme durch Echtzeitprüfungen auf Postfachebene und kontinuierlich aktualisierte Validierungsdaten. Um die langfristige Listenqualität zu gewährleisten, E-Mail-Verifizierungstools kann auch ältere Kontakte in großen Mengen erneut überprüfen, wodurch Adressen entfernt werden können, die im Laufe der Zeit ungültig werden.
Bewährte Methoden zur E-Mail-Validierung in JavaScript
Eine gute E-Mail-Validierung nutzt mehrere Prüfungen gleichzeitig, um die Datenqualität, die Benutzerfreundlichkeit und die Zustellbarkeit zu verbessern.
- Validierung in mehreren Ebenen: Beginnen Sie mit dem HTML5-E-Mail-Attribut, fügen Sie einen regulären Ausdruck oder eine Validierungsbibliothek hinzu und nutzen Sie anschließend einen API-Aufruf zur Überprüfung auf Postfachebene. Jede Ebene deckt Probleme auf, die die vorherige übersehen hat, während die früheren Prüfungen sofortiges Feedback liefern, ohne auf eine Netzwerkanfrage warten zu müssen.
- Verlassen Sie sich bei sicherheitskritischen Abläufen niemals allein auf die clientseitige Validierung: Browserbasierte Validierungen können umgangen werden, daher sollten E-Mail-Adressen vor der Verarbeitung von Anmeldungen, Käufen oder der Kontoerstellung immer erneut auf dem Server validiert werden.
- Nutzen Sie lieber eine bewährte Bibliothek oder API, anstatt langfristig eigene reguläre Ausdrücke zu pflegen: E-Mail-Adressformate ändern sich ständig. Eine aktiv gepflegte Bibliothek oder API bewältigt neue Sonderfälle, ohne dass Sie Ihre eigenen Muster aktualisieren müssen.
- API-Aufrufe zurückweisen und klares visuelles Feedback geben: Eine Ladeanzeige während der API-Ausführung, ein grünes Häkchen bei Erfolg und eine spezifische Fehlermeldung im Fehlerfall („Meinten Sie …?“). [E-Mail geschützt] ?") sorgen Sie dafür, dass das Formular responsiv bleibt und reduzieren Sie die Abbruchrate.
- Ergebnisse der Protokollvalidierung während der Entwicklung: Wegwerf-E-Mail-Anbieter, wiederholte Tippfehler und verdächtige Domains werden bei der Überprüfung der Protokolle deutlich, was es einfacher macht, die Validierungsregeln im Laufe der Zeit zu verschärfen.
- Auch auf Listenebene sollte validiert werden: Die Echtzeitvalidierung erkennt ungültige Adressen bereits bei der Anmeldung. Validierung der E-Mail-Liste hilft dabei, Adressen zu entfernen, die später inaktiv werden.
Fazit
Die HTML5-Validierung bietet Ihnen grundlegende Formatprüfungen kostenlos. Regex- und Validierungsbibliotheken verbessern die Benutzerfreundlichkeit durch schnelles clientseitiges Feedback, während APIs überprüfen, ob ein Postfach tatsächlich existiert und E-Mails empfangen kann.
Dieser letzte Schritt ist entscheidend. Eine clientseitige Validierung allein kann nicht bestätigen, dass eine Adresse echt, aktiv oder sicher ist. Bei Anmeldeformularen für den Produktiveinsatz, wo Zustellbarkeit und Listenqualität wichtig sind, verhindert die API-Validierung, dass Wegwerf-E-Mail-Adressen, fehlerhafte Domains, Sammeladressen und andere ungeeignete Kontakte in Ihre Datenbank gelangen.
Der DeBounce E-Mail-Validierungs-API Diese Funktion integriert die Verifizierung auf E-Mail-Ebene direkt in Ihren Anmeldeprozess und hilft so, ungültige Adressen zu blockieren, bevor sie Ihre Absenderreputation beeinträchtigen. Wenn Sie eine schnellere Einrichtung wünschen, … JavaScript-Validierungs-Widget bietet eine Möglichkeit ohne Programmierung, die E-Mail-Validierung in Echtzeit direkt in Ihre Formulare einzubinden.
