HTML5メールバリデーション

HTML5では以下のようになります。

<input type="email" placeholder="Enter your email">
<input type="submit" value="Submit">

そして、ユーザーがsubmitを押すと、自動的に以下のようなエラーメッセージが表示されます。

.

www.w3.org]2サイトのinput type=emailページでは、メールアドレスとは以下の正規表現にマッチする任意の文字列であると書かれています。

/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/

required属性とpattern`属性を使って、値が正規表現パターンにマッチすることを要求します。

<input
    type="text"
    pattern="/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/"
    required
>

HTML5の属性である"pattern"を使用するだけでは、正しくメールを検証することは非常に困難です。 pattern"を使用しない場合、someone@が処理されますが、これは有効なメールではありません。

Using pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}"は、フォーマットがsomeone@email.comであることを要求しますが、送信者がsomeone@email.net.au（または同様のもの）のようなフォーマットを持っている場合は検証されません。これを修正するには、pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}"とすると、".com.auや.net.auなどが検証されます。

しかし、これを使用すると、someone@email.com のバリデーションは許可されません。 つまり、HTML5を使ってメールアドレスを検証することは、まだ完全にはできないのです。これを解決するには、次のようにします。

<input id="email" type="text" name="email" pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}" required placeholder="Enter you Email">
<br>
<input type="submit" value="Submit The Form">

または

<input id="email" type="text" name="email" pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}" required placeholder="Enter you Email">
<br>
<input type="submit" value="Submit The Form">

しかし、HTML5のpattern属性を使って、メールアドレスの両方またはすべてのバージョンを検証する方法がわかりません。