HTML ＜input pattern属性＞ 指定文字を必ず含む・含まない

Question

下記画像のような入力フォームを作成しています。

一般的に使われるメールアドレスの入力フォームをinput pattern属性で正規表現チェックしたいです。XSS対策を考慮し[ 0-9 a-z A-Z . - _ ]あたりを必ず含める、それ以外は含めないで良いかと考えています。

いろいろ調べましたが、＠を途中で挟んでしまった関係でややこしくなってしまいました。
回答いただける方是非お願いします。

Comments

[kei344]

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

[m.ts10806]

チェックするのはPHPなどのサーバーサイド？JavaScriptなどのクライアントサイド？　という環境面のところも踏まえて追記してください。

Answer 1

バリデーションにあたって、偽陽性（実際に使えるメールアドレスなのにバリデーションで弾いてしまう）は避けないといけません。たとえば、+は前半部分に入ることが許されています（し、実際に使うこともちょくちょくあります）。

厳密ではないですが、<input type="email">で使われる正規表現がこんな感じですので、これの前半と後半をそのまま使えばいいのではないかと思います。