Dlaczego walidacja formularza HTML5 zezwala na e-maile bez kropki?

Piszę bardzo prostą makietę, aby zademonstrować walidację formularzy HTML5. Zauważyłem jednak, że weryfikacja adresu e-mail nie sprawdza kropki w adresie ani nie sprawdza znaków po tej kropce.

Innymi słowy, „john @ kowalski” jest uważane za prawidłowe, jeśli wyraźnie nie jest prawidłowym adresem e-mail; „łania” nie jest domeną.

Oto jak koduję moje pole e-mail:

<input type="email" required />

Czy to nie wystarczy?

Sprawdź to skrzypce, żeby zobaczyć, co mam na myśli.

Uwaga: zamiast tego wiem, jak to osiągnąć za pomocą wzorca RegEx. Zastanawiam się tylko, jak ktoś mógłby uciec z użyciem zamiast tego typu e-maila.

Ponieważ a @ b to prawidłowy adres e-mail (np. Localhost to poprawna domena). Zobacz http://en.wikipedia.org/wiki/Email_address#Examples

Pamiętaj też, że zawsze powinieneś sprawdzać poprawność danych wejściowych na serwerze. Walidacja po stronie klienta powinna mieć na celu wyłącznie przekazywanie użytkownikowi informacji zwrotnej i nie można na niej polegać, ponieważ można ją łatwo ominąć.

Teoretycznie możesz mieć adres bez znaku „.” w.

Ponieważ technicznie rzeczy takie jak:

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

Wszystkie są prawidłowe e-maile.

Tak więc standardowa walidacja HTML5 dopuszcza wszystkie prawidłowe wiadomości e-mail, w tym te rzadkie.

Aby uzyskać łatwe do odczytania wyjaśnienia (zamiast czytać standardy): http://en.wikipedia.org/wiki/Email_address#Examples

Spróbuj dodać to do wejścia

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

Skrzypce

RFC 822 , rozdział 6, daje określenie adresu w rozszerzonej notacji Backusa-Naura (BNF)

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

Korzystanie z tej specyfikacji a@b jest prawidłowym adresem.

AKTUALIZACJA

Odpowiadając na komentarz Trejkazu, dodaję następujące definicje. Widzimy, że SPACJA jest dozwolona, ​​ale tylko w cudzysłowie.

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  

Na tej stronie MDN pokazuje, jakie przeglądarki wyrażeń regularnych powinny być używane do weryfikacji wiadomości e-mail:

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

Możesz nieznacznie zmienić to wyrażenie regularne, aby wymagało co najmniej jednej kropki w nazwie domeny: zmień gwiazdkę *na końcu wyrażenia regularnego na plus +. Następnie użyj tego wyrażenia regularnego jako patternatrybutu:

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

Możesz dostosować wzór pola wiadomości e-mail:

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

Oto, jak możesz to zrobić w html5, używając wzorca wyrażenia regularnego. Możesz także dołączyć własną wiadomość do wyświetlenia.

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

Ten wzór zawsze mi pasuje.

Tekst musi być pisany małymi literami, pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"ale myślę, że obejmuje mniej więcej większość e-maili.