HTML5では、ユーザーが入力したものが有効なメールアドレスやURLであるかどうかをチェックするためのjsやサーバーサイドのコードが不要になると言われています。
また、JSを使わずに、ユーザーが間違った形式のメールアドレスを入力した場合にメッセージを表示するにはどうすればよいでしょうか。
<input type="email" pattern="[^ @]*@[^ @]*" placeholder="Enter your email">
<input type="submit" value="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,}"
は、フォーマットが[email protected]
であることを要求しますが、送信者が[email protected]
(または同様のもの)のようなフォーマットを持っている場合は検証されません。これを修正するには、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などが検証されます。
しかし、これを使用すると、[email protected] のバリデーションは許可されません。 つまり、HTML5を使ってメールアドレスを検証することは、まだ完全にはできないのです。これを解決するには、次のようにします。
<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,}" required placeholder="Enter you Email">
<br>
<input type="submit" value="Submit The Form">
</form>
または
<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">
</form>
しかし、HTML5のpattern属性を使って、メールアドレスの両方またはすべてのバージョンを検証する方法がわかりません。