Frage HTML5 E-Mail-Validierung


Es wird gesagt "Mit HTML5 brauchen wir nicht mehr js oder einen serverseitigen Code, um zu überprüfen, ob die Eingabe des Benutzers eine gültige E-Mail- oder URL-Adresse ist"

Wie kann ich E-Mails nach der Eingabe eines Benutzers bestätigen? und ohne JS, wie man eine Nachricht anzeigt, wenn der Benutzer ein falsches Formular seiner E-Mail-Adresse eingibt.

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

75
2017-10-26 10:48


Ursprung


Antworten:


In HTML5 können Sie Folgendes tun:

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

Und wenn der Benutzer auf "Senden" klickt, wird automatisch eine Fehlermeldung wie folgt angezeigt:

Error Message


95
2017-10-26 10:56



Das input type=email Seite der www.w3.org Die Website merkt an, 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-]+)*$/

Benutze die required Attribut und a pattern Attribut, um zu verlangen, dass der Wert dem Regex-Muster entspricht.

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

24
2017-10-09 07:31



Verwenden [a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,} zum somemail@email.com / somemail@email.com.vn


8
2017-11-20 04:41



Hier ist das Beispiel, das ich für alle meine E-Mail-Formulareingaben verwende. Dieses Beispiel ist ASP.NET, gilt aber 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: xxx@xxx.xxx)" 
    type="email" TextMode="Email" validate="required:true"
    pattern="[a-zA-Z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*" >
</asp:TextBox>

HTML5 validiert immer noch das Muster, wenn es nicht benötigt wird. Ich habe noch keinen gefunden, der falsch positiv war.

Dies wird als folgender HTML-Code gerendert:

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

5
2018-05-19 07:04



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

Durch die Verwendung von JS können Sie die Validierung dynamisch allen Eingabefeldern vom Typ E-Mail innerhalb Ihrer Site hinzufügen, anstatt jedes einzelne Eingabefeld zu ändern.

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('');
        }
    });
})

4
2018-02-17 01:35



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:

enter image description here

Getestet in Chrome.


4
2018-03-28 17:17



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

Verwenden pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}" wird das Format erfordern someone@email.com wenn der Absender jedoch ein Format wie someone@email.net.au (oder Ähnliches) wird nicht validiert, um dies zu beheben pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}" Dies wird ".com.au oder .net.au oder ähnlich" validieren.

Wenn Sie dies jedoch verwenden, wird die Validierung von someone@email.com nicht gestattet. Was die Validierung von E-Mail-Adressen betrifft, ist HTML5 noch immer nicht vollständig mit uns verknüpft. Um das zu vervollständigen, würden Sie etwas wie folgt 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 Sie alle oder beide Versionen von E-Mail-Adressen mithilfe des HTML5-Musterattributs validieren.


1
2018-03-26 08:57



Die einzige 100% korrekte Methode besteht darin, an der angegebenen E-Mail-Adresse nach @ -Zeichen zu suchen und dann eine Bestätigungsnachricht 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.

David Gilbertson schrieb darüber Jahre zuvor:

Es gibt zwei Fragen, die wir stellen müssen:

  1. Hat der Benutzer verstehe, dass sie eine E-Mail schreiben sollten   Adresse in dieses Feld?
  2. Hat der Benutzer Geben Sie ihre E-Mail korrekt ein   Adresse in dieses Feld?

Wenn Sie ein gut gestaltetes Formular mit einem Etikett haben   das sagt "email", und der Benutzer gibt dann irgendwo ein '@' Zeichen ein   es ist sicher zu sagen, dass sie verstanden, dass sie es sein sollten   Eingabe einer E-Mail-Adresse. Einfach.

Als nächstes wollen wir eine Validierung durchführen, um festzustellen, ob sie korrekt sind   Ihre E-Mail-Adresse eingegeben.

Nicht möglich.

[...]

Jeder Tippfehler wird es tun bestimmt Ergebnis nur eine falsche E-Mail-Adresse könnte sein führen zu einer ungültigen E-Mail-Adresse.

[...]

Es hat keinen Sinn herauszufinden, ob eine E-Mail-Adresse "gültig" ist. Ein Benutzer ist viel wahrscheinlicher zu betreten ein falsches und gültiges E-Mail-Adresse als sie eingeben ungültiger.

Darüber hinaus funktionieren einige E-Mail-Adressen, die syntaktisch oder politisch ungültig sein können. Beispielsweise, postmaster@ai funktioniert technisch, obwohl TLDs keine MX-Datensätze haben sollten. Siehe auch Diskussion über E-Mail-Validierung auf der WHATWG Mailingliste (wo HTML5 in erster Linie entworfen ist).


0
2018-05-29 06:28