wake-up-neo.net

HTML5-E-Mail-Eingabemusterattribut

Ich versuche, ein HTML5-Formular zu erstellen, das eine E-Mail-Eingabe, eine Kontrollkästchen-Eingabe und eine Eingabe zum Senden enthält. Ich versuche, das Musterattribut für die E-Mail-Eingabe zu verwenden, weiß aber nicht, was ich in dieses Attribut einfügen soll. Ich weiß, dass ich einen regulären Ausdruck verwenden soll, der mit der JavaScript-Musterproduktion übereinstimmen muss, aber ich weiß nicht, wie das geht.

Ich versuche, dieses Attribut zu aktivieren, indem ich überprüfe, ob die E-Mail ein @ und mindestens einen oder mehrere Punkte enthält. Wenn möglich, überprüfe ich, ob die Adresse nach dem @ eine echte Adresse ist. Wenn ich dies über dieses Attribut nicht tun kann, werde ich JavaScript in Betracht ziehen, aber um nach einem @ und einem oder mehreren Punkten zu suchen, möchte ich auf jeden Fall das Musterattribut verwenden.

das Musterattribut muss prüfen, ob:

  1. nur einer @
  2. ein oder mehrere Punkte
  3. und wenn möglich überprüfen, ob die Adresse nach dem @ eine gültige Adresse ist

Eine Alternative zu dieser ist die Verwendung von JavaScript, aber für alle anderen Bedingungen möchte ich kein JavaScript verwenden

39
Colton

Dies ist ein doppeltes Problem (wie viele in der World Wide Web-Welt).

Sie müssen prüfen, ob der Browser HTML5 unterstützt (ich verwende Modernizr, um dies zu tun). In diesem Fall erledigt der Browser die Aufgabe für Sie, wenn Sie eine normale Form haben. Wenn Sie jedoch Ajax/Json benötigen (wie in vielen alltäglichen Fällen auch), müssen Sie trotzdem eine manuelle Überprüfung durchführen.

Ich empfehle daher, einen regulären Ausdruck zu verwenden, um jederzeit vor dem Senden eine Bewertung vorzunehmen. Der Ausdruck, den ich benutze, ist der folgende:

var email = /^[a-z0-9._%+-][email protected][a-z0-9.-]+\.[a-z]{2,4}$/;

Dieser stammt aus http://www.regular-expressions.info/ . Diese Welt ist schwer zu verstehen und zu meistern. Ich empfehle Ihnen, diese Seite sorgfältig zu lesen.

40
Alwin Kesler

Ich hatte genau dieses Problem mit der HTML5-E-Mail-Eingabe. Unter Verwendung der obigen Antwort von Alwin Keslers habe ich der HTML5-E-Mail-Eingabe den regulären Ausdruck hinzugefügt, sodass der Benutzer am Ende etwas haben muss.

<input type="email" pattern="[a-z0-9._%+-][email protected][a-z0-9.-]+\.[a-z]{2,4}$" />
60
Stephen

In HTML5 können Sie den neuen E-Mail-Typ verwenden: http://www.w3.org/TR/html-markup/input.email.html

Beispielsweise:

<input type="email" id="email" />

Wenn der Browser HTML5 implementiert, wird sichergestellt, dass der Benutzer eine gültige E-Mail-Adresse in das Feld eingegeben hat. Beachten Sie, dass wenn der Browser kein HTML5 implementiert, dies wie ein 'Text'-Typ behandelt wird, dh:

<input type="text" id="email" />
23
Anthony

Leider sind alle Vorschläge mit Ausnahme von B-Money in den meisten Fällen ungültig.

Hier sind viele gültige E-Mails wie:

  • [email protected]
  • антон@россия.рф (Russisch, рф ist eine gültige Domain)
  • chinesisch und viele andere Sprachen (siehe zum Beispiel internationale E-Mail und verknüpfte Spezifikationen).

Wegen der Komplexität, um die Validierung richtig zu machen, schlage ich eine sehr generische Lösung vor:

<input type="text" pattern="[^@\s][email protected][^@\s]+\.[^@\s]+" title="Invalid email address" />

Es wird geprüft, ob die E-Mail mindestens ein Zeichen (auch eine Zahl oder was auch immer, außer einem anderen "@" oder Leerzeichen) vor "@", mindestens zwei Zeichen (oder was auch immer, außer einem anderen "@" oder Leerzeichen) nach "@" und einen Punkt in enthält zwischen. Dieses Muster akzeptiert keine Adressen wie lol @ company, die manchmal in internen Netzwerken verwendet werden. Aber dieses könnte verwendet werden, falls erforderlich:

<input type="text" pattern="[^@\s][email protected][^@\s]+" title="Invalid email address" />

Beide Muster akzeptieren auch weniger gültige E-Mails, z. B. E-Mails mit vertikalem Tabulator. Aber für mich ist es gut genug. Stärkere Prüfungen wie der Versuch, eine Verbindung zum Mailserver oder zur Ping-Domäne herzustellen, sollten auf der Serverseite ohnehin durchgeführt werden.

Übrigens habe ich gerade angular Direktive (noch nicht gut getestet)) für die E-Mail-Validierung mit novalidate und ohne das obige Muster geschrieben, um das DRY-Prinzip zu unterstützen:

.directive('isEmail', ['$compile', '$q', 't', function($compile, $q, t) {
    var EMAIL_PATTERN = '^[^@\\s][email protected][^@\\s]+\\.[^@\\s]+$';
    var EMAIL_REGEXP = new RegExp(EMAIL_PATTERN, 'i');
    return {
        require: 'ngModel',
        link: function(scope, elem, attrs, ngModel){
            function validate(value) {
                var valid = angular.isUndefined(value)
                    || value.length === 0
                    || EMAIL_REGEXP.test(value);
                ngModel.$setValidity('email', valid);
                return valid ? value : undefined;
            }
            ngModel.$formatters.unshift(validate);
            ngModel.$parsers.unshift(validate);
            elem.attr('pattern', EMAIL_PATTERN);
            elem.attr('title', 'Invalid email address');
        }
    };
}])

Verwendung:

<input type="text" is-email />

Für B-Money ist das Muster "@" gerade genug. Aber es lehnen zwei oder mehr "@" und alle Leerzeichen ab.

22
Anton Bessonov

Dies ist der Ansatz, den ich verwende und den Sie an Ihre Bedürfnisse anpassen können:

^[\w]{1,}[\w.+-]{0,}@[\w-]{2,}([.][a-zA-Z]{2,}|[.][\w-]{2,}[.][a-zA-Z]{2,})$

Erläuterung:

  1. Wir möchten sicherstellen, dass die E-Mail-Adresse immer mit einem Wort beginnt:

    ^ [\ w]

Ein Wort ist ein beliebiges Zeichen, eine Ziffer oder ein Unterstrich. Sie können das Muster [a-zA-Z0-9_] verwenden, es liefert jedoch das gleiche Ergebnis und ist länger.

  1. Als nächstes wollen wir sicherstellen, dass es mindestens ein solches Zeichen gibt:

    ^ [\ w] {1,}

  2. Als nächstes möchten wir ein beliebiges Wort, eine Ziffer oder Sonderzeichen im Namen zulassen. Auf diese Weise können wir sicher sein, dass die E-Mail nicht mit dem Punkt beginnt, sondern den Punkt an einer anderen Stelle als der ersten Position enthalten kann:

    ^ [\ w] {1,} [\ w. + -]

  3. Und natürlich muss es kein solches Zeichen geben, da die E-Mail-Adresse nur einen Buchstaben gefolgt von @ enthalten kann:

    ^ [\ w] {1,} [\ w. + -] {0,}

  4. Als nächstes brauchen wir das @ -Zeichen, das obligatorisch ist, aber es kann nur eines in der gesamten E-Mail geben:

    ^ [\ w] {1,} [\ w. + -] {0,} @

  5. Direkt hinter dem @ -Zeichen möchten wir den Domainnamen. Hier können Sie festlegen, wie viele Zeichen Sie mindestens benötigen und aus welchem ​​Zeichenbereich. Ich würde für alle Wortzeichen einschließlich des Bindestrichs [\ w -] gehen und ich möchte mindestens zwei davon {2,} . Wenn Sie Domains wie t.co zulassen möchten, müssen Sie ein Zeichen aus diesem Bereich {1 zulassen ,} :

    ^ [\ w] {1,} [\ w. + -] {0,} @ [\ w -] {2,}

  6. Als nächstes müssen wir uns mit zwei Fällen befassen. Entweder gibt es nur den Domainnamen gefolgt von der Domain-Endung oder den Subdomainnamen gefolgt von dem Domainnamen gefolgt von der Endung, zum Beispiel abc.com versus abc.co.uk . Damit dies funktioniert, müssen wir den (a | b) Token verwenden, wobei ein steht für den ersten Fall, b steht für den zweiten Fall und | steht für logisches ODER. Im ersten Fall werden wir uns nur mit der Domain-Endung befassen. Da sie jedoch immer vorhanden ist, können wir sie beiden Fällen hinzufügen:

    ^ [\ w] {1,} [\ w. + -] {0,} @ [\ w -] {2,} ([.] [a-zA-Z] {2,} | [.] [A-zA-Z] {2,})

Dieses Muster besagt, dass wir genau ein Punktzeichen, gefolgt von Buchstaben und keinen Ziffern, benötigen und in beiden Fällen mindestens zwei davon benötigen.

  1. Für den zweiten Fall fügen wir den Domainnamen vor der Domain-Endung hinzu, wodurch der ursprüngliche Domainname zu einer Unterdomäne wird:

    ^ [\ w] {1,} [\ w. + -] {0,} @ [\ w -] {2,} ([.] [a-zA-Z] {2,} | [.] [\ w -] {2,} [.] [a-zA-Z] {2,})

Der Domain-Name kann aus Word-Zeichen einschließlich des Bindestrichs bestehen. Auch hier möchten wir mindestens zwei Zeichen.

  1. Schließlich müssen wir das Ende des gesamten Musters markieren:

    ^ [\ w] {1,} [\ w. + -] {0,} @ [\ w -] {2,} ([.] [a-zA-Z] {2,} | [.] [\w -] {2,} [.] [a-zA-Z] {2,}) $

  2. Testen Sie hier, ob Ihre E-Mail-Adresse dem Muster entspricht: https://regex101.com/r/374XLJ/1

7
Jan Zavrel
<input name="email" type="email" pattern="[A-Za-z0-9._%+-][email protected][A-Za-z0-9.-]+\.[A-Za-z]{1,63}$" class="form-control" placeholder="Email*" id="email" required="">

Dies ist eine modifizierte Version der obigen Lösung, die auch Großbuchstaben akzeptiert.

6
Vikrant Shitole

Ich habe Regex verwendet, um die folgenden E-Mails zu beantworten.

[email protected] # Minimum three characters
[email protected] # Accepts Caps as well.
[email protected] # Accepts . before @

Code

<input type="email" pattern="[A-Za-z0-9._%+-]{3,}@[a-zA-Z]{3,}([.]{1}[a-zA-Z]{2,}|[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,})" />

Eine weitere Lösung, die auf der w3org-Spezifikation aufbaut.
Der ursprüngliche reguläre Ausdruck stammt aus w3org .
Der letzte " * Lazy quantifier" in diesem regulären Ausdruck wurde durch " + Ein oder mehrere Quantifizierer ".
Ein solches Muster entspricht vollständig der Spezifikation, mit einer Ausnahme: Es erlaubt keine Domänenadressen der obersten Ebene wie " foo @ com "

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

Sie möchten wahrscheinlich so etwas. Beachten Sie die Attribute:

  • erforderlich
  • typ = E-Mail
  • autofokus
  • muster

<input type="email" value="" name="EMAIL" id="EMAIL" placeholder="[email protected]" autofocus required pattern="[^ @]*@[^ @]*" />

3
B-Money
<input type="email" name="email" id="email" value="" placeholder="Email" required />

dokumentation http://www.w3.org/TR/html-markup/input.email.html

3
Ashley Stuart

Aktualisiert 2018 Answer

Gehen Sie hier http://emailregex.com/

Javascript:

/^(([^<>()\[\]\\.,;:\[email protected]"]+(\.[^<>()\[\]\\.,;:\[email protected]"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/

2
imnickvaughn

Wenn Sie kein Whitepaper über E-Mail-Standards schreiben möchten, verwenden Sie das folgende Beispiel, in dem nur ein bekanntes CSS-Attribut (Texttransformation: Kleinbuchstaben) eingeführt wird, um das Problem zu lösen:

<input type="email" name="email" id="email" pattern="[a-zA-Z0-9._%+-][email protected][a-z0-9.-]+\.[a-zA-Z]{2,4}" style="text-transform: lowercase" placeholder="enter email here ..." title="please enter a valid email" />
1
Manifest Man
^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$
0
Saurabh Chauhan

Ich habe den folgenden regulären Ausdruck getestet, der das gleiche Ergebnis liefert wie Chrome Validierung der HTML-E-Mail-Eingabe.

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

Sie können es auf dieser Website testen: regex101

0
Yang Zhang