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

Versuchen Sie nicht, jede Regel aus RFC 5322 mit einer Regex durchzusetzen. Sie würden echte Kunden ablehnen (o'brien@example.ie, anna+news@example.com) und trotzdem asdf@asdf.com akzeptieren. 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-Validierung API liefert außerdem einen did_you_mean-Vorschlag.)

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

Nur eine Prüfung beim Mailserver des Empfängers sagt Ihnen, ob anna@company.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_API_KEY } });
  if (!res.ok) throw new Error(`Validation failed: ${res.status}`);
  return res.json();
}

const result = await validateEmail("anna@company.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, 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.