締切済み

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

  • すぐに回答を!
  • 質問No.9590434
  • 閲覧数63
  • ありがとう数0
  • 気になる数0
  • 回答数2
  • コメント数0

お礼率 17% (6/34)

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">

回答 (全2件)

  • 回答No.1

ベストアンサー率 66% (96/144)

こんにちは。

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

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

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

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

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

ベストアンサー率 44% (186/420)

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

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,500万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する

特集

ピックアップ

ページ先頭へ