【正規表現】HTML5のpattern属性について

質問

HTML5のpattern属性で半角英数記号を指定するにはどう記述したら良いですか？

HTMLやCSSの学習をしています。
正規表現についてはほぼ分かりません。

(1)ユーザーIDやパスワード入力フォーム半角英数記号のみの入力を処理する場合、type属性は”text”でいいのでしょうか？

(2)pattern 属性に使う正規表現はほぼ理解できません。自分なりに調べてみたのですが、以下のような記述だと＿アンダーバーや＠マークなどの記号は識別できないのではないかと言われました。
また入力文字数制限は正規表現でも出来るようですが、以下のように自分でもわかるminlength, maxlengthで記述しようと思っていまがこれで大丈夫なのでしょうか？

サンプルとして以下のように記述してみました。
type属性や、「半角英数記号」の入力文字など正しい書き方を教えてください。
よろしくお願いします。

<input type="text" name="username" pattern="^[0-9A-Za-z]+$" minlength="4" maxlength="50">

回答No.1

hok212

こんにちは。

(1) textまたはpasswordを指定することが妥当でしょう。

(2) 正規表現で半角英数記号というと [\x21-\x7E] ですが、これだとユーザ名やパスワードとして相応しくない記号が含まれます。
※クォート・アスタリスク 他諸々

ですので、文字の範囲を指定した後に、使用可能な記号を列記するほうが良いと思います。
無難なところでは次のようなものでしょうか。
[0-9a-zA-Z_@-]

minlengthとmaxlengthについては、最近ブラウザでは大丈夫でしょうが、私はあまり信頼しておりません。

何れにせよ、ユーザが入力した文字列のバリデーション（字種や文字長）は、クライアント側だけでなく、データを受け取るサーバ側でも必須です。

回答No.1

ballville

「_」「@」を入れたければ[]の中に追加すればOK。文字数は{4,}で４文字以上{,50}で５０字以内。なので
pattern="^[0-9A-Za-z_@]{4,50}$"
とすればいいです。
世の中には親切な人がいて、よく使いそうなパターンを作ってくれているページを見つけました。参考にどうぞ。
https://qiita.com/ka215/items/795a179041c705bef03b