みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

【正規表現】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">

投稿日時 - 2019-02-22 13:24:36

QNo.9590434

すぐに回答ほしいです

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

こんにちは。

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

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

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

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

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

投稿日時 - 2019-02-23 10:15:36

ANo.1

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

投稿日時 - 2019-02-23 09:27:16

あなたにオススメの質問