HTML5フォーム検証でドットなしのメールが許可されるのはなぜですか？

HTML5のフォーム検証を示すために、非常に単純なモックアップを作成しています。ただし、メールの検証ではアドレスのドットはチェックされず、ドットに続く文字もチェックされないことに気付きました。

つまり、「john @ doe」は有効なメールアドレスではない場合、有効と見なされます。「doe」はドメインではありません。

これは私が私のメールフィールドをコーディングしている方法です：

<input type="email" required />

それで十分ではありませんか？

このフィドルをチェックして、私の意味を確認してください。

注：代わりに、RegExパターンを使用してこれを行う方法を知っています。私は誰かが代わりに電子メールの種類を使うことでどうやって逃げることができるのだろうと思っています。

なぜなら、a @ 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章では、拡張バッカスナウア記法（BNF）のアドレスの指定を与えます。

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

この指定の使用a@bは有効なアドレスです。

更新

Trejkazのコメントに答えるために、次の定義を追加します。スペースは使用できますが、引用符で囲まれた文字列でのみ使用できます。

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

この正規表現を少し変更して、ドメイン名に少なくとも1つのドットを要求することができます。*正規表現の末尾にあるスターをプラスに変更し+ます。次に、その正規表現を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,}$"ほとんどのメールをカバーしていると思います。