---
title: "E-Mail-Adressen mit JavaScript prüfen: Formularbeispiel | Emvero"
description: "Prüfen Sie das E-Mail-Format mit HTML und JavaScript, zeigen Sie verständliche Fehler und validieren Sie die Eingabe erneut auf dem Server."
url: https://emvero.io/de/blog/email-validation-javascript/
language: de
updated: 2026-10-14
---

Blog

# E-Mail-Adressen mit JavaScript prüfen: ein Formularbeispiel

Bauen Sie ein E-Mail-Feld mit verständlichen Fehlermeldungen, testen Sie seine Grenzen und prüfen Sie die übermittelte Eingabe unabhängig auf Ihrem Server.

Veröffentlicht 2026-10-14

Um eine E-Mail-Adresse mit JavaScript zu prüfen, verwenden Sie ein HTML-Feld mit ` ` und `required`. Mit `checkValidity()` ermitteln Sie, welche Rückmeldung nötig ist. Eine bestandene Formatprüfung klärt weder die Existenz von Domain und Postfach noch den Zugriff darauf. Das erläutert auch die [MDN-Referenz zum E-Mail-Eingabefeld](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/email).

## Ein Formular zum Ausprobieren

Speichern Sie das Beispiel als HTML-Datei und öffnen Sie es im Browser. Geben Sie eine Adresse ein und wählen Sie Continue oder drücken Sie die Eingabetaste. Das Beispiel zeigt das Ergebnis der Formatprüfung lokal an. Für eine Registrierung müssen Sie den erfolgreichen Zweig mit Ihrem eigenen Server-Endpunkt verbinden. Die englischen Beschriftungen und Meldungen im Code sind Beispieltexte, die Sie an Ihre Oberfläche anpassen können.

```
<form id="email-form" novalidate>
  <label for="email">Email address</label>
  <input id="email" name="email" type="email" autocomplete="email"
         required aria-describedby="email-feedback">
  <p id="email-feedback" aria-live="polite"></p>
  <button type="submit">Continue</button>
</form>

<script>
const form = document.querySelector("#email-form");
const email = document.querySelector("#email");
const feedback = document.querySelector("#email-feedback");

email.addEventListener("input", () => {
  feedback.textContent = "";
  email.removeAttribute("aria-invalid");
});

form.addEventListener("submit", (event) => {
  event.preventDefault();

  if (!email.checkValidity()) {
    const message = email.validity.valueMissing
      ? "Enter an email address."
      : email.validity.typeMismatch
        ? "Enter an address in email format."
        : "Check the email address.";

    feedback.textContent = message;
    email.setAttribute("aria-invalid", "true");
    email.focus();
    return;
  }

  email.removeAttribute("aria-invalid");
  feedback.textContent = "Format accepted. Send the address to your server.";
});
</script>
```

## So behandelt das Beispiel Fehler

`novalidate` unterdrückt die automatische Prüfung beim Absenden. Der ausdrückliche Aufruf von `checkValidity()` funktioniert weiterhin. `valueMissing` kennzeichnet ein leeres Pflichtfeld, `typeMismatch` einen Fehler im E-Mail-Format. Diese Prüfungen sind in der [HTML-Spezifikation zur Constraint Validation API](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#the-constraint-validation-api) beschrieben.

Das Label benennt das Feld. Bei einem Fehler zeigt der Code eine passende Meldung an, setzt `aria-invalid` und legt den Fokus wieder auf das Eingabefeld. `aria-describedby` ordnet den Hinweis dem Feld zu. Über `aria-live="polite"` werden geänderte Hinweise für assistive Technologien zugänglich. Sobald die Person die Eingabe bearbeitet, entfernt der Code die bisherige Meldung und die Fehlerkennzeichnung. Die Rückmeldung hängt also nicht allein von Farbe ab.

Wenn Ihnen die Fehlermeldungen des Browsers genügen, richten Sie eine POST-Übermittlung an Ihren Server-Endpunkt ein. Entfernen Sie anschließend `novalidate` und den JavaScript-Submit-Handler. Das HTML-Feld übernimmt bereits die Formatprüfung; JavaScript steuert hier Wortlaut und Position der Rückmeldung.

## Vor der Serveranbindung testen

Probieren Sie die folgenden Eingaben aus. Die Ergebnisse beziehen sich auf die Browserprüfung dieses Formulars. Dabei wird keine Netzwerkanfrage gesendet.

| Eingabe | Ergebnis im Beispiel | Worauf Sie achten sollten |
| --- | --- | --- |
| Leeres Feld | Meldung zur fehlenden Eingabe | Der Fokus liegt wieder im Feld, `aria-invalid` ist gesetzt |
| `alex.example.com` | Formatfehler | Das fehlende `@` wird erkannt |
| `alex@example.com` | Format akzeptiert | Die Adresse wird nicht übermittelt |
| `alex+orders@example.com` | Format akzeptiert | Der lokale Teil mit Plus-Zusatz bleibt erhalten |
| `alex@example` | Format akzeptiert | Ein gültiges Format belegt keinen öffentlichen Mailweg |
| `alex@example.com,pat@example.org` | Formatfehler | Das Formular nimmt eine Adresse an und verwendet kein `multiple` |

Korrigieren Sie nach einem Fehler den Wert und senden Sie das Formular erneut ab. Die alte Meldung und `aria-invalid` sollten verschwinden. Testen Sie die Schaltfläche und die Eingabetaste, denn beide können das Formular absenden.

Die Domains sind fiktive Beispiele: [RFC 2606 reserviert `example.com` und `example.org` für Dokumentation](https://www.rfc-editor.org/rfc/rfc2606.html). Eine akzeptierte Beispieladresse weist daher kein echtes Postfach nach.

## Wann ein eigener regulärer Ausdruck sinnvoll ist

Behalten Sie für dieses Formular die E-Mail-Regeln des Browsers bei und verwenden Sie JavaScript für die Rückmeldung. Ein zusätzlicher regulärer Ausdruck ist eine weitere Regel, die Sie pflegen müssen. Wenn Ihre Anwendung bewusst nur Adressen einer bestimmten Organisation zulässt, dokumentieren Sie diese fachliche Vorgabe und setzen Sie sie auch auf dem Server durch.

Übergeben Sie Adressen, die die Prüfung bestehen, unverändert an den Server. Würden Sie im Plus-Beispiel `+orders` entfernen, änderten Sie den eingegebenen Wert. Dieses Beispiel prüft eine einzelne Adresse nach den Regeln des Browserfelds. Für ungewöhnliche oder internationalisierte Formate müssen Sie gesondert festlegen, was Sie unterstützen, und Formular, Server-Parser und Maildienst gemeinsam testen.

## Nach der Formatprüfung auf dem Server weitermachen

Übermitteln Sie den Wert über den normalen Formular- oder API-Weg an Ihren Anwendungsserver. Prüfen Sie die Daten dort unabhängig: Ein Client kann die Browserprüfung umgehen und direkt eine Anfrage senden. Diese Grenze beschreibt der [MDN-Leitfaden zur Formularvalidierung](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation).

Im Beispiel verhindert `event.preventDefault()` das Absenden. An der Stelle der Erfolgsmeldung würden Sie die Anfrage Ihrer Anwendung ergänzen. Prüfen Sie die Serverantwort, bevor Sie den Ablauf fortsetzen. Schlägt die Anfrage fehl, zeigen Sie eine verständliche Meldung an und ermöglichen Sie einen erneuten Versuch. Die lokale Erfolgsmeldung allein darf weder ein Konto anlegen noch eine Adresse als verifiziert kennzeichnen.

Nach der serverseitigen Formatprüfung hängt der nächste Schritt davon ab, welche Frage Sie beantworten müssen:

| Frage | Geeigneter nächster Schritt | Was offenbleibt |
| --- | --- | --- |
| Ist die Adresse formal richtig aufgebaut? | Rückmeldung im Browser und unabhängige Prüfung auf dem Server | Existenz von Domain und Postfach |
| Kann ich die Adresse in meinem Ablauf verwenden? | Domain, Mailweg und, soweit verfügbar, Empfängerbelege serverseitig prüfen | Garantierte Zustellung und Zugriff auf das Postfach |
| Hat diese Person Zugriff auf das Postfach? | Einen Bestätigungslink oder Code aus Ihrer Anwendung senden und eine Reaktion verlangen | Identität und spätere Zustellung |

Die [Gegenüberstellung von Syntaxprüfung und SMTP-Prüfung](https://emvero.io/de/compare/smtp-vs-syntax-validation/) hilft bei der Wahl der Prüftiefe. Eine vollständige Emvero-Prüfung kann über SMTP Belege zum Empfänger sammeln, ohne eine Nachricht zu senden. Serverbeschränkungen oder Zeitüberschreitungen können zum Ergebnis `unknown` führen. Damit ist nicht nachgewiesen, dass die Adresse nicht zustellbar ist. Rufen Sie die [E-Mail-Verifizierungs-API](https://emvero.io/de/email-verification-api/) von Ihrem Server aus auf, damit die Zugangsdaten privat bleiben.

Der [Leitfaden für die Prüfung im Registrierungsformular](https://emvero.io/de/guides/signup-form-validation/) zeigt, bei welchen Ergebnissen Sie die Anmeldung fortsetzen und wann eine Bestätigung sinnvoll ist.

## Begriffe, die hier vorkommen

### E-Mail-Syntax

Die Regeln für den Aufbau einer E-Mail-Adresse. Eine Formatprüfung braucht weder DNS noch eine Verbindung zum Mailserver und weist kein Postfach nach.

### SMTP-Handshake

Ein Austausch von Befehlen und Antworten mit einem Mailserver. Eine Postfachprüfung kann so die Empfängerantwort lesen, ohne eine E-Mail zu senden.

## Situationen, für die das gilt

### Eine Adresse im Registrierungsformular prüfen

Auf der anderen Seite der Anfrage wartet jemand - die Latenz bestimmt also das Design, und eine falsche Ablehnung kostet Sie die Kundschaft.

[Alle Beiträge](https://emvero.io/de/blog/)

## Wählen Sie, was Sie als Nächstes prüfen möchten.

Starten Sie eine Prüfung in Ihrem Konto und sehen Sie sich die Belege im Ergebnis an.

Kostenlos starten