Pourquoi la validation de formulaire HTML5 autorise-t-elle les e-mails sans point?

J'écris une maquette très simple pour démontrer une certaine validation de formulaire HTML5. Cependant, j'ai remarqué que la validation de l'e-mail ne vérifie pas le point dans l'adresse, ni ne vérifie les caractères après ledit point.

En d'autres termes, "john @ doe" est considéré comme valide, quand ce n'est clairement pas une adresse e-mail valide; "doe" n'est pas un domaine.

Voici comment je codifie mon champ email:

<input type="email" required />

N'est-ce pas assez?

Vérifiez ce violon pour voir ce que je veux dire.

Remarque: je sais comment y parvenir via un modèle RegEx à la place. Je me demande simplement comment quelqu'un pourrait s'en tirer en utilisant le type de courrier électronique à la place.

Parce qu'un @ b est une adresse e-mail valide (par exemple, localhost est un domaine valide). Voir http://en.wikipedia.org/wiki/Email_address#Examples

Gardez également à l'esprit que vous devez toujours effectuer la validation d'entrée dans le serveur. La validation côté client doit être uniquement destinée à donner des commentaires à l'utilisateur et ne doit pas être invoquée, car elle peut être facilement contournée.

Vous pouvez théoriquement avoir une adresse sans "." dans.

Depuis techniquement des choses telles que:

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

Sont tous des e-mails valides.

Ainsi, la validation HTML5 standard autorise tous les e-mails valides, y compris les plus rares.

Pour quelques explications faciles à lire (au lieu de lire les standards): http://en.wikipedia.org/wiki/Email_address#Examples

Essayez d'ajouter ceci à l'entrée

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

Violon

La RFC 822 , chapitre 6, donne la spécification d'une adresse sous forme augmentée Backus-Naur (BNF):

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

L'utilisation de cette spécification a@best une adresse valide.

METTRE À JOUR

Pour répondre au commentaire de Trejkaz, j'ajoute les définitions suivantes. Nous voyons que SPACE est autorisé mais uniquement entre guillemets.

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  

Sur cette page MDN, il montre les navigateurs d'expression régulière à utiliser pour valider l'e-mail:

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

Vous pouvez légèrement modifier cette expression régulière pour exiger au moins un point dans le nom de domaine: changez l'étoile *à la fin de l'expression régulière en plus +. Ensuite, utilisez cette expression régulière comme 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>

Vous pouvez personnaliser le modèle du champ d'e-mail:

input:valid {
  border-color: green
}

input:invalid {
  border-color: red
}

Email:
<input type="email" required value="a@b.c" /><br>

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

Voici comment vous pouvez le faire avec html5 en utilisant un modèle regex. Vous pouvez également inclure un message personnalisé à afficher.

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

Ce modèle fonctionne toujours pour moi.

Le texte doit être en minuscules pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"mais je pense qu'il couvre plus ou moins la plupart des e-mails.