it-swarm.com.de

HTML5-E-Mail-Überprüfung

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

Wie kann ich eine E-Mail nach der Eingabe eines Benutzers bestätigen? 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">
82
abcid d

In HTML5 können Sie folgendes machen:

<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:

Error Message

106
Midhun MP

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

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

Verwenden Sie das required-Attribut und ein pattern-Attribut, um zu verlangen, dass der Wert dem Regex-Muster entspricht.

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

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

12
Van Nguyen

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

<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!#$%&'*+\/=?^_`{|}~.-][email protected][a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*" >
</asp:TextBox>

HTML5 validiert weiterhin mit dem Muster, wenn es nicht erforderlich ist. Habe noch keinen gefunden, der falsch positiv war. 

Dies stellt das folgende HTML dar:

<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;'*+\/=?^_`{|}~.-][email protected][a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*">
6
Keith H.
document.getElementById("email").validity.valid

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

 enter image description here

In Chrome getestet.

5
Nakilon

Ich weiß, dass Sie nicht nach der Javascript-Lösung suchen. Es gibt jedoch einige Dinge wie die angepasste Überprüfungsnachricht, die meiner Erfahrung nach nur mit JS ausgeführt werden kann.

Durch die Verwendung von JS können Sie die Überprüfung dynamisch allen Eingabefeldern des Typs E-Mail innerhalb Ihrer Site hinzufügen, anstatt jedes einzelne Eingabefeld bearbeiten 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('');
        }
    });
})
4
karic83

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

Wenn Sie pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}" verwenden, muss das Format [email protected] sein. Wenn der Absender jedoch ein Format wie [email protected] (oder ein ähnliches Format) hat, das nicht korrigiert 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,}" angeben. Dadurch wird ".com.au" oder ".net.au" oder ähnliches bestätigt. 

Wenn Sie dies jedoch verwenden, wird die Überprüfung durch [email protected] nicht gestattet. So weit die einfache Verwendung von HTML5 zur Validierung von E-Mail-Adressen noch nicht ganz bei uns ist. Um dies abzuschließen, würden Sie so etwas 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.

1
Keith

Sie können diesem Muster auch folgen

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

Ref: In W3Schools

1
skpaik

Die einzige zu 100% korrekte Methode besteht darin, irgendwo in der eingegebenen E-Mail-Adresse nach @ -sign zu suchen und dann eine Bestätigungsnachricht an die angegebene E-Mail-Adresse zu senden. Wenn sie den Anweisungen zur Bestätigung in der E-Mail-Nachricht folgen können, ist die eingegebene E-Mail-Adresse korrekt.

David Gilbertson hat darüber geschrieben vor Jahren:

Wir müssen zwei Fragen stellen:

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

Wenn Sie ein übersichtliches Formular mit einem Etikett haben "E-Mail" und der Benutzer gibt irgendwo ein "@" -Symbol ein, dann Es ist sicher zu sagen, dass sie verstanden haben, dass sie sein sollten Eingabe einer E-Mail-Adresse Einfach.

Als Nächstes möchten wir einige Validierungen durchführen, um festzustellen, ob sie richtig sind ihre E-Mail-Adresse eingegeben.

Nicht möglich.

[...]

Jeder Fehltyp wird definitiv zu einer falschen E-Mail-Adresse führen, aber nur vielleicht führt zu einer ungültigen E-Mail-Adresse.

[...]

Es ist sinnlos, herauszufinden, ob eine E-Mail-Adresse "gültig" ist. Ein Benutzer gibt mit größerer Wahrscheinlichkeit falsch und gültig E-Mail-Adresse ein, als er ein ungültig eingibt.

Außerdem funktionieren einige E-Mail-Adressen, die möglicherweise syntaktisch oder politisch ungültig sind. Zum Beispiel funktioniert [email protected] technisch, obwohl TLDs keine MX-Datensätze haben sollten . Siehe auch Diskussion über E-Mail-Validierung in der WHATWG-Mailingliste (wobei HTML5 an erster Stelle steht).

1

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

<input type="email"/>

Wenn der Benutzer den Mauszeiger über das Eingabefeld bewegt, wird ein Tooltip angezeigt, in dem er aufgefordert wird, eine gültige E-Mail-Adresse einzugeben. Allerdings haben Bootstrap-Formulare eine viel bessere Tooltip-Nachricht, die den Benutzer dazu auffordert, eine E-Mail-Adresse einzugeben Der eingegebene Wert stimmt nicht mit einer gültigen E-Mail überein.

0
Fabian Madurai