Чому HTML5 перевірка форми дозволяє електронну пошту без крапки?

Я пишу дуже простий макет, щоб продемонструвати деяку перевірку форм HTML5. Однак, я помітив, що перевірка електронної пошти не перевіряє крапку в адресі, а також не перевіряє символів, які слідують за вказаною крапкою.

Іншими словами, "john @ doe" вважається дійсним, коли явно не є дійсною адресою електронної пошти; "doe" - не домен.

Ось як я кодую своє поле електронної пошти:

<input type="email" required />

Це недостатньо?

Перевірте цю загадку, щоб побачити, що я маю на увазі.

Примітка. Я знаю, як це досягти за допомогою шаблону RegEx. Мені просто цікаво, як хтось може замість цього скористатися типом електронної пошти.

Тому що @ b - дійсна адреса електронної пошти (наприклад, localhost - дійсний домен). Дивіться http://en.wikipedia.org/wiki/Email_address#Examples

Також майте на увазі, що ви завжди повинні робити перевірку вводу на сервері. Перевірка на стороні клієнта повинна бути лише для надання відгуку користувачеві і не покладатися на нього, оскільки його можна легко обійти.

Теоретично ви можете мати адресу без "." в.

Що стосується технічних речей, таких як:

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

Чи всі справжні електронні листи.

Таким чином, стандартна перевірка HTML5 дозволяє використовувати всі дійсні електронні листи, включаючи звичайні.

Деякі легкі для читання пояснення (замість того, щоб читати стандарти): http://en.wikipedia.org/wiki/Email_address#Examples

Спробуйте додати це до вводу

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

Скрипка

RFC 822 , глава 6, дає специфікацію адреси в доповненої Backus-Наура (BNF):

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

Використовуючи цю специфікацію a@b є дійсною адресою.

ОНОВЛЕННЯ

Щоб відповісти на коментар Трейказу, я додаю наступні визначення. Ми бачимо, що SPACE дозволений, але тільки в цитованому рядку.

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  

На цій сторінці MDN показано, що браузери регулярного виразу повинні використовувати для перевірки електронної пошти:

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

Ви можете злегка змінити цей регулярний вираз, щоб вимагати хоча б однієї крапки в доменному імені: змінити зірку *в кінці регулярного виразу на плюс +. Потім використовуйте цей регулярний вираз як patternатрибут:

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

Ви можете налаштувати шаблон поля електронної пошти:

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

Ось як це можна зробити за допомогою html5 за допомогою шаблону регулярного вираження. Ви також можете включити спеціальне повідомлення для відображення.

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

Ця модель завжди працює для мене.

Текст повинен бути малі, pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"але я думаю, що він охоплює більш-менш більшість електронних листів.