Blog..

  • Home
  • ブログ
  • inputのpattern属性で半角英数字+記号なおかつスペースは含まない時

inputのpattern属性で半角英数字+記号なおかつスペースは含まない時

HTML

posted: 2023/11/14
update: 2024/02/29

ログインIDやコードのような英数字と記号だけ入力可能にして尚且つ半角スペースは弾きたい場合のバリデーションの正規表現が調べても意外とパッと出てこなくて手こずったのでメモ
ログインIDはそもそも合致しなかったら弾かれるからスペース弾く機能別にいらないか…シリアルコード入力のような時に必要になったので下記で実装しました。
条件:半角英数字と記号のみ入力可能なおかつ半角スペースはどの位置に入っても含まない

<input type="text" pattern="^[!-~]+$" class="input" name="" value="" placeholder="">

とりあえずこれでいけた。上記はASCIIコードの!から~まで(半角英数字と一部の特殊文字)を許可し半角スペースは含まない、なので実質半角英数字+記号だけ入力できる。パイプや¥はあまり入ることないからまあいいかな。
英数字だけ制御する方法や記号のみ制御する方法は出てくるけど、この条件になるとパッと出てこなかった。なぜ。
英数字制御+記号全部指定の書き方は面倒なので、これにしました。地味にめんどくさい。

▼ SNSでこの記事をシェア