Wie überprüft man E-Mail-Adressen in JavaScript?

Methode mit regulären Ausdrücken

Reguläre Ausdrücke (Regex) sind nützlich für die E-Mail-Validierung in JavaScript. Ein Regex-Muster kann prüfen, ob eine E-Mail-Adresse dem richtigen Format entspricht.

Hier ist ein einfaches Regex-Muster für die E-Mail-Validierung:

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

Dieses Muster prüft auf:

• Zeichen, die keine Leerzeichen oder @-Symbole sind
• Ein @-Symbol
• Weitere Zeichen, die keine Leerzeichen oder @-Symbole sind
• Einen Punkt
• Abschluss mit Zeichen, die keine Leerzeichen oder @-Symbole sind

Vorteile der Verwendung von Regex:

• Flexibel und anpassbar
• Kann komplexe Regeln handhaben
• Schnelle Verarbeitung

Nachteile der Verwendung von Regex:

• Kann schwer zu lesen und zu pflegen sein
• Kann einige Sonderfälle übersehen
• Strenge Muster könnten gültige E-Mails ablehnen

const emailRegex = new RegExp(
  '^[^\\s@]+@' +    // Start, ein oder mehr Zeichen, kein Leerzeichen oder @
  '[^\\s@]+\\.' +   // @, ein oder mehr Zeichen, kein Leerzeichen oder @, dann ein Punkt
  '[^\\s@]+$',      // Ein oder mehr Zeichen, kein Leerzeichen oder @, dann Ende
  'i'               // Flag für Groß-/Kleinschreibung ignorieren
);

Eingebaute HTML5-Validierung

HTML5 bietet E-Mail-Validierung mit dem Attribut type="email" für Eingabefelder.

Beispiel:

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

Diese Methode:

• Bietet grundlegende E-Mail-Format-Validierung
• Löst Browser-Fehlermeldungen aus
• Funktioniert ohne JavaScript

Browser-Unterstützung:

• Die meisten neuen Browser unterstützen type="email"
• Alte Browser behandeln es möglicherweise als Texteingabe
• Die Validierung kann zwischen Browsern unterschiedlich sein

HTML5-Validierung wird oft mit JavaScript kombiniert, um mehr Kontrolle über den Prozess und das Benutzerfeedback zu haben.

<form id="emailForm">
  <input type="email" id="email" name="email" required>
  <button type="submit">Absenden</button>
</form>

<script>
document.getElementById('emailForm').addEventListener('submit', function(event) {
  const email = document.getElementById('email').value;
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

  if (!emailRegex.test(email)) {
    event.preventDefault();
    alert('Bitte geben Sie eine gültige E-Mail-Adresse ein.');
  }
});
</script>

Erstellung einer Validierungsfunktion

So erstellen Sie eine E-Mail-Validierungsfunktion in JavaScript:

1. Definieren Sie die Funktion:

   function validateEmail(email) {
   // Validierungslogik kommt hier
   }

2. Fügen Sie das Regex-Muster hinzu:

   function validateEmail(email) {
   const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
   return emailRegex.test(email);
   }

Das Regex-Muster /^[^\s@]+@[^\s@]+\.[^\s@]+$/ prüft auf:

• ^: Anfang der Zeichenfolge
• [^\s@]+: Ein oder mehrere Zeichen, die kein Leerzeichen oder @ sind
• @: Das @-Symbol
• [^\s@]+: Ein oder mehrere Zeichen, die kein Leerzeichen oder @ sind
• \.: Ein Punkt
• [^\s@]+: Ein oder mehrere Zeichen, die kein Leerzeichen oder @ sind
• $: Ende der Zeichenfolge

3. Verwenden Sie die Funktion:

   const email = "user@example.com";
   if (validateEmail(email)) {
   console.log("Gültige E-Mail-Adresse");
   } else {
   console.log("Ungültige E-Mail-Adresse");
   }

Umgang mit Benutzereingaben

So behandeln Sie Benutzereingaben für die E-Mail-Validierung:

1. Erfassen Sie die Eingabe:

const emailInput = document.getElementById('email-input');
const submitButton = document.getElementById('submit-button');

submitButton.addEventListener('click', function() {
  const userEmail = emailInput.value;
  // Validierungslogik hier
});

2. Validieren und Ergebnisse anzeigen:

submitButton.addEventListener('click', function() {
  const userEmail = emailInput.value;
  const resultDisplay = document.getElementById('result-display');

  if (validateEmail(userEmail)) {
    resultDisplay.textContent = "Gültige E-Mail-Adresse";
    resultDisplay.style.color = "green";
  } else {
    resultDisplay.textContent = "Ungültige E-Mail-Adresse";
    resultDisplay.style.color = "red";
  }
});

Dieser Code erfasst Ihre Eingabe, validiert sie mit der validateEmail-Funktion und zeigt das Ergebnis mit entsprechender Formatierung an.