HTML-E-Mail-Validierung

Im heutigen Beitrag erfahren wir, wie man E-Mail-Validierung in HTML durchführt.

E-Mail-Validierung in HTML

Der Prozess der Überprüfung einer E-Mail-Adresse, um festzustellen, ob sie erreichbar und gültig ist, wird als E-Mail-Validierung bezeichnet. Es führt einen kurzen Prozess durch, der Tippfehler schnell findet, unabhängig davon, ob es sich um harmlose Fehler oder absichtliche Täuschung handelt.

Die effizienteste Methode, um die Erfassung qualitativ hochwertiger Daten sicherzustellen, ist nach wie vor die E-Mail-Validierung. Hard Bounces treten normalerweise auf, wenn die E-Mail-Adresse vom Benutzer geschlossen wird, eine gefälschte E-Mail-Adresse ist oder beides.

Gemäß Best Practices sollten Sie nicht mehr als fünf Spam-Beschwerden für jeweils 5.000 gesendete E-Mails erhalten.

Der Benutzer kann eine E-Mail-Adresse mit <input>-Elementen vom Typ email eingeben und ändern. Bevor das Formular gesendet werden kann, wird der Eingabewert automatisch überprüft, um sicherzustellen, dass er entweder leer oder eine ordnungsgemäß formatierte E-Mail-Adresse ist.

Das value-Attribut des <input>-Elements enthält eine Zeichenfolge, die automatisch als E-Mail-syntaxkonform validiert wird.

Damit der Eingabewert die Einschränkungsvalidierung besteht, ist das Attribut pattern, sofern angegeben, ein regulärer Ausdruck, dem der Wert der Eingabe entsprechen muss.

Das Muster der E-Mail-Validierung ist wie folgt:

^[a-z0-9!#$%&‘*+/=?^_`{|}~-]+(?:.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?

Um das vorherige Konzept besser zu verstehen, betrachten Sie das folgende Beispiel.

<form id="emailForm">
<input
    type="email"
    required
    placeholder="email1"
>
<input type="text" required name="email1"
    pattern="^[a-z0-9!#$%&‘*+/=?^_`{|}~-]+(?:.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?">

<button type="submit">save</button>
</form>

const form = document.getElementById('emailForm');
function handleForm(event) {
  event.preventDefault();
  console.log('Form submitted')
}
form.addEventListener('submit', handleForm);

Im letzten Beispiel haben wir zwei Eingabeelemente definiert, wovon das erste vom Typ email ist und die E-Mail-Validierung selbstständig durchführt.

Im zweiten Eingabeelement des Datentyps text wurde ein gültiges E-Mail-ID-Muster angegeben. Falsche E-Mail-Adressen verhindern das Absenden des Formulars und es wird eine Fehlermeldung angezeigt.

Führen Sie die obige Codezeile in jedem mit HTML kompatiblen Browser aus. Es wird das folgende Ergebnis angezeigt.