E-Mail-Adressen in JavaScript validieren

1. Die erste Prüfung übernimmt der Browser

<input type="email" name="email" required autocomplete="email">

type="email" zeigt Mobilgeräten die passende Tastatur und blockiert offensichtlich fehlerhafte Eingaben, bevor das Formular abgeschickt wird. Prüfen Sie input.validity.valid oder hören Sie auf das Event invalid, um eine eigene Meldung anzuzeigen.

2. Eine praxistaugliche Formatprüfung

const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;

function looksLikeEmail(value) {
  const email = value.trim();
  return email.length <= 254 && EMAIL.test(email);
}

looksLikeEmail("anna@example.com"); // true
looksLikeEmail("anna@example");     // false

Bauen Sie keine strenge eigene Regex. Solche Muster lehnen oft echte Kunden ab (o'brien@example.ie, anna+news@example.com) und akzeptieren trotzdem asdf@asdf.com. Unser E-Mail-Syntax-Checker zeigt die einzelnen Regeln, falls Sie sie brauchen.

3. Tippfehler abfangen

Die meisten ungültigen Anmeldungen sind Tippfehler in bekannten Domains: gmial.com, hotmial.com, yaho.com. Schlagen Sie eine Korrektur vor, statt abzulehnen:

const DOMAINS = ["gmail.com", "yahoo.com", "hotmail.com", "outlook.com", "icloud.com"];

function suggest(email) {
  const [user, domain] = email.toLowerCase().split("@");
  const close = DOMAINS.find((d) => d !== domain && levenshtein(d, domain) <= 2);
  return close ? `${user}@${close}` : null;
}

(Jede kleine Levenshtein-Funktion reicht; die E-Mail-Validierungs-API liefert außerdem einen Vorschlag im Feld did_you_mean.)

4. Prüfen, ob das Postfach existiert (Node.js)

Nur eine Prüfung beim Mailserver des Empfängers sagt Ihnen, ob anna@example.com wirklich existiert. Machen Sie das auf Ihrem Server:

// Node.js 18+ (eingebautes fetch)
async function validateEmail(email) {
  const url = `https://api.emailvalidation.io/v1/info?email=${encodeURIComponent(email)}`;
  const res = await fetch(url, { headers: { apikey: process.env.EMAILVALIDATION_KEY } });
  if (!res.ok) throw new Error(`Validation failed: ${res.status}`);
  return res.json();
}

const result = await validateEmail("anna@example.com");
if (result.state === "undeliverable") {
  // ablehnen: die Adresse existiert nicht
} else if (result.disposable) {
  // nach einer dauerhaften Adresse fragen
}

Die Antwort enthält state (deliverable, undeliverable oder unknown), einen reason, einen score und die Merkmale format_valid, mx_found, smtp_check, catch_all, disposable, role und free.

Empfohlener Ablauf für Anmeldeformulare

1. type="email" plus die Regex für sofortiges Feedback.
2. Tippfehler-Vorschlag, wenn das Feld den Fokus verliert.
3. API-Prüfung beim Absenden (serverseitig). Blockieren Sie undeliverable und disposable, akzeptieren Sie den Rest.
4. Ist die API langsam oder nicht erreichbar, akzeptieren Sie die Adresse: Blockieren Sie nie Anmeldungen wegen eines Ausfalls der Validierung.

Probieren Sie es ohne Code im E-Mail-Validator aus.