HTML5-E-Mail-Validierung

Es heißt "Mit HTML5 benötigen wir kein js oder einen serverseitigen Code mehr, um zu überprüfen, ob die Benutzereingabe eine gültige E-Mail- oder URL-Adresse ist."

Wie kann ich E-Mails nach Eingabe eines Benutzers validieren? und ohne JS, wie eine Nachricht angezeigt wird, wenn der Benutzer eine falsche Form seiner E-Mail-Adresse eingibt.

<input type="email" pattern="[^ @]*@[^ @]*" placeholder="Enter your email">
<input type="submit" value="Submit">

In HTML5 können Sie Folgendes tun:

<form>
<input type="email" placeholder="Enter your email">
<input type="submit" value="Submit">
</form>

Wenn der Benutzer auf "Senden" drückt, wird automatisch eine Fehlermeldung angezeigt:

Auf der input type=emailSeite der Website www.w3.org wird darauf hingewiesen , dass eine E-Mail-Adresse eine beliebige Zeichenfolge ist, die dem folgenden regulären Ausdruck entspricht:

/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/

Verwenden Sie das requiredAttribut und ein patternAttribut, um zu fordern, dass der Wert mit dem Regex-Muster übereinstimmt.

<input
    type="text"
    pattern="/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/"
    required
>

Verwenden [a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}für [email protected]/[email protected]

document.getElementById("email").validity.valid

scheint wahr zu sein, wenn das Feld entweder leer oder gültig ist. Dies hat auch einige andere interessante Flaggen:

In Chrome getestet.

Hier ist das Beispiel, das ich für alle meine Formular-E-Mail-Eingaben verwende. Dieses Beispiel ist ASP.NET, gilt jedoch für alle:

<asp:TextBox runat="server" class="form-control" placeholder="Contact's email" 
    name="contact_email" ID="contact_email" title="Contact's email (format: [email protected])" 
    type="email" TextMode="Email" validate="required:true"
    pattern="[a-zA-Z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*" >
</asp:TextBox>

HTML5 überprüft das Muster weiterhin, wenn es nicht benötigt wird. Ich habe noch keinen gefunden, der falsch positiv war.

Dies wird wie folgt gerendert:

<input class="form-control" placeholder="Contact's email" 
    name="contact_email" id="contact_email" type="email" 
    title="Contact's email (format: [email protected])" 
    pattern="[a-zA-Z0-9!#$%&amp;'*+\/=?^_`{|}~.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*">

Ich weiß, dass Sie nicht nach der Javascript-Lösung suchen, aber es gibt einige Dinge wie die angepasste Validierungsnachricht, die meiner Erfahrung nach nur mit JS durchgeführt werden kann.

Mithilfe von JS können Sie die Validierung auch dynamisch zu allen Eingabefeldern vom Typ E-Mail auf Ihrer Site hinzufügen, anstatt jedes einzelne Eingabefeld ändern zu müssen.

var validations ={
    email: [/^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/, 'Please enter a valid email address']
};
$(document).ready(function(){
    // Check all the input fields of type email. This function will handle all the email addresses validations
    $("input[type=email]").change( function(){
        // Set the regular expression to validate the email 
        validation = new RegExp(validations['email'][0]);
        // validate the email value against the regular expression
        if (!validation.test(this.value)){
            // If the validation fails then we show the custom error message
            this.setCustomValidity(validations['email'][1]);
            return false;
        } else {
            // This is really important. If the validation is successful you need to reset the custom error message
            this.setCustomValidity('');
        }
    });
})

Ein bisschen spät für die Party, aber dieser reguläre Ausdruck hat mir geholfen, die Eingabe des E-Mail-Typs auf der Client-Seite zu überprüfen. Wir sollten die Überprüfung jedoch auch immer auf der Serverseite durchführen.

<input type="email" pattern="^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$">

Weitere Regex aller Art finden Sie hier .

TL; DR: Die einzige 100% korrekte Methode besteht darin, irgendwo in der eingegebenen E-Mail-Adresse nach @ -sign zu suchen und dann eine Validierungsnachricht an die angegebene E-Mail-Adresse zu senden. Wenn sie den Validierungsanweisungen in der E-Mail-Nachricht folgen können , ist die eingegebene E-Mail-Adresse korrekt.

Lange Antwort:

David Gilbertson schrieb vor ungefähr diesem Jahr :

Wir müssen zwei Fragen stellen:

1. Hat der Benutzer verstanden, dass er eine E-Mail-Adresse in dieses Feld eingeben sollte?
2. Hat der Benutzer seine eigene E-Mail-Adresse korrekt in dieses Feld eingegeben?

Wenn Sie ein übersichtliches Formular mit einem Etikett mit der Aufschrift "E-Mail" haben und der Benutzer irgendwo ein "@" -Symbol eingibt, können Sie mit Sicherheit sagen, dass er verstanden hat, dass er eine E-Mail-Adresse eingeben sollte. Einfach.

Als nächstes möchten wir eine Validierung durchführen, um festzustellen, ob sie ihre E-Mail-Adresse korrekt eingegeben haben.

Nicht möglich.

[...]

Jeder falsche Typ führt definitiv zu einer falschen E-Mail-Adresse, aber möglicherweise nur zu einer ungültigen E-Mail-Adresse.

[...]

Es macht keinen Sinn herauszufinden, ob eine E-Mail-Adresse "gültig" ist. Es ist weitaus wahrscheinlicher, dass ein Benutzer eine falsche und gültige E-Mail-Adresse eingibt als eine ungültige .

Mit anderen Worten, es ist wichtig zu beachten, dass jede Art von stringbasierter Validierung nur prüfen kann, ob die Syntax ungültig ist. Es kann nicht überprüft werden, ob der Benutzer die E-Mail tatsächlich sehen kann (z. B. weil der Benutzer bereits Anmeldeinformationen, die eingegebene Adresse einer anderen Person oder die eingegebene geschäftliche E-Mail anstelle der persönlichen E-Mail-Adresse für einen bestimmten Anwendungsfall verloren hat). Wie oft lautet die Frage, nach der Sie wirklich suchen, "Ist diese E-Mail syntaktisch gültig " anstelle von " Kann ich mit dem Benutzer über die angegebene E-Mail-Adresse kommunizieren "? Wenn Sie die Zeichenfolge mehr als "enthält sie @" validieren , versuchen Sie, die vorherige Frage zu beantworten! Persönlich interessiert mich immer nur die letztere Frage.

Darüber hinaus funktionieren einige E-Mail-Adressen, die möglicherweise syntaktisch oder politisch ungültig sind. Funktioniert beispielsweise postmaster@aitechnisch, obwohl TLDs keine MX-Einträge haben sollten . Siehe auch Diskussion über E - Mail - Validierung auf der WHATWG Mailingliste (wo HTML5 in erster Linie konzipiert ist).

Erstellen Sie mit HTML 5 einfach die eingegebene E-Mail wie folgt:

<input type="email"/>

Wenn der Benutzer mit der Maus über das Eingabefeld fährt, wird ein Tooltip angezeigt, in dem er aufgefordert wird, eine gültige E-Mail-Adresse einzugeben. Bootstrap-Formulare enthalten jedoch eine viel bessere Tooltip-Nachricht, mit der der Benutzer aufgefordert wird, eine E-Mail-Adresse einzugeben. Diese wird angezeigt, sobald der eingegebene Wert nicht mit einer gültigen E-Mail übereinstimmt.

Sie können diesem Muster auch folgen

<form action="/action_page.php">
  E-mail: <input type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
  <input type="submit">
</form>

Ref: In W3Schools

Laut MDN ist dieses RegExp in Ordnung, um E-Mails zu validieren, da E-Mails, die den Spezifikationen entsprechen, damit übereinstimmen sollten.

/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}
  [a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/

Es ist sehr schwierig, E-Mails einfach mit dem HTML5-Attribut "pattern" korrekt zu validieren. Wenn Sie kein "Muster" verwenden, wird jemand @ verarbeitet. Das ist keine gültige E-Mail.

Für die Verwendung pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}"muss das Format [email protected]jedoch sein. Wenn der Absender ein Format wie [email protected](oder ein ähnliches) hat, das nicht validiert wird, um dies zu beheben, können Sie pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}"festlegen, dass ".com.au oder .net.au oder ähnliches" validiert wird.

Wenn Sie dies jedoch verwenden, kann [email protected] nicht validieren. Soweit die einfache Verwendung von HTML5 zur Validierung von E-Mail-Adressen noch nicht vollständig bei uns ist. Um dies zu vervollständigen, würden Sie ungefähr Folgendes verwenden:

<form>
<input id="email" type="text" name="email" pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}" required placeholder="Enter you Email">
<br>
<input type="submit" value="Submit The Form">
</form>

oder:

<form>
<input id="email" type="text" name="email" pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}" required placeholder="Enter you Email">
<br>
<input type="submit" value="Submit The Form">
</form>

Ich weiß jedoch nicht, wie ich beide oder alle Versionen von E-Mail-Adressen mithilfe des HTML5-Musterattributs überprüfen kann.