Warum erlaubt die HTML5-Formularvalidierung E-Mails ohne Punkt?

Ich schreibe ein sehr einfaches Modell, um die Validierung von HTML5-Formularen zu demonstrieren. Ich habe jedoch festgestellt, dass bei der E-Mail-Überprüfung weder nach einem Punkt in der Adresse noch nach Zeichen gesucht wird, die diesem Punkt folgen.

Mit anderen Worten, "john @ doe" gilt als gültig, wenn es sich eindeutig nicht um eine gültige E-Mail-Adresse handelt. "doe" ist keine Domain.

So codiere ich mein E-Mail-Feld:

<input type="email" required />

Ist das nicht genug

Überprüfen Sie diese Geige, um zu sehen, was ich meine.

Hinweis: Ich weiß, wie dies stattdessen über ein RegEx-Muster erreicht wird. Ich frage mich nur, wie jemand davonkommen könnte, stattdessen den E-Mail-Typ zu verwenden.

Weil a @ b eine gültige E-Mail-Adresse ist (z. B. localhost eine gültige Domain). Siehe http://en.wikipedia.org/wiki/Email_address#Examples

Beachten Sie außerdem, dass Sie die Eingabevalidierung immer auf dem Server durchführen sollten. Die clientseitige Validierung sollte nur dazu dienen, dem Benutzer Feedback zu geben, und nicht als verlässlich angesehen werden, da sie leicht umgangen werden kann.

Sie können theoretisch eine Adresse ohne "." im.

Da technisch Dinge wie:

user@com
user@localserver
user@[IPv6:2001:db8::1]

Sind alle gültigen E-Mails.

Die Standard-HTML5-Validierung ermöglicht also alle gültigen E-Mails, einschließlich der ungewöhnlichen.

Für einige leicht zu lesende Erklärungen (anstatt die Standards durchzulesen ): http://en.wikipedia.org/wiki/Email_address#Examples

Versuchen Sie, dies der Eingabe hinzuzufügen

pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,63}$"

Geige

Der RFC 822 , Kapitel 6, enthält die Angabe einer Adresse in erweiterter Backus-Naur-Form (BNF):

addr-spec   =  local-part "@" domain
local-part  =  word *("." word)
domain      =  sub-domain *("." sub-domain)

Die Verwendung dieser Spezifikation a@bist eine gültige Adresse.

AKTUALISIEREN

Um den Kommentar von Trejkaz zu beantworten, füge ich die folgenden Definitionen hinzu. Wir sehen, dass SPACE erlaubt ist, aber nur in Anführungszeichen.

word          =  atom / quoted-string
atom          =  1*<any CHAR except specials, SPACE and CTLs>
quoted-string = <"> *(qtext/quoted-pair) <">
SPACE         =  <ASCII SP, space>
CTL           =  <any ASCII control character and DEL> 
qtext         =  <any CHAR excepting <">, "\" & CR, and including linear-white-space>
quoted-pair   =  "\" CHAR  

Auf dieser MDN-Seite werden die Regex-Browser angezeigt, mit denen die E-Mail überprüft werden soll:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email#Validation

Sie können diesen regulären Ausdruck leicht ändern, um mindestens einen Punkt im Domainnamen zu benötigen: Ändern Sie den Stern *am Ende des regulären Ausdrucks in ein Plus +. Verwenden Sie dann diesen regulären Ausdruck als patternAttribut:

<input type="email" pattern="^[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])?)+$"></input>

Sie können das Muster des E-Mail-Felds anpassen:

input:valid {
  border-color: green
}

input:invalid {
  border-color: red
}

Email:
<input type="email" required value="[email protected]" /><br>

Non-dots Email:
<input type="email" required pattern="[^.]+@[^.]+" value="[email protected]" />

Hier erfahren Sie, wie Sie dies mit HTML5 mithilfe eines Regex-Musters tun können. Sie können auch eine benutzerdefinierte Nachricht zum Anzeigen einfügen.

<form>
  <input type="email" value="paul@test" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,63}$" title="Hey, you are missing domain part in the email !!!"/>
  <button type="submit">Click Me</button>
</form>

Dieses Muster funktioniert immer bei mir.

Text muss in Kleinbuchstaben geschrieben werden, pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"aber ich denke, er deckt mehr oder weniger die meisten E-Mails ab.