HTML5で正規表現を使わずにバリデーションしよう！（特定の範囲の数字だけ認める）

3139 ワード
HTML バリデーション HTML5 正規表現 HTML テキストリンク

この記事でわかること

  • n以上の整数だけを認める入力ボックスの実装方法がわかる
  • m以下の整数だけを認める入力ボックスの実装方法がわかる

そもそもバリデーションとは

記述に用いた言語の文法や、そのプログラムに要求される仕様（書の記述）に則って正しく記述されているかを検証することを表す。
IT用語辞典 e-Words

背景

『グラブルダメージ上限計算機』というものを制作したのですが、その中にはテキストボックスが含まれています。

<input type="txt" size="8" id="other" value="0"/>%

このテキストボックスには本来、半角で 0以上の整数 を入力してほしいのですが、
例えば数字以外のもの、"hoge"を入力すると意図しない出力（NaN）がなされます。

0以上の整数の入力だけを受け付ける入力ボックスを作ろう！というのが今回の目的です。
しかもややこしそうな正規表現は使いたくないという条件で。

（正規表現は難しくないよ、という意見もあるかもしれませんが、ここでは割愛させてください。）

正規表現を使わないで済ませるには

input要素のtype属性をnumberに指定し、
さらにmin属性を使って、その最小値を0にします。
最小値を0以外にしたい場合は、この数値を任意に変更します。

補足として、n以下の数字だけを認めたい！という場合は、min属性をmax属性に置き換えればよいです。

その他、idやsizeなども適宜、変更や追加・削除してください。


<input type="number" size="8" id="other" value="0" min="0" />%

おわりに（注意書き）

今回取り扱ったものはHTML, CSS, JavaScriptだけで構成されたWebページであるので、
こういったバリデーションで十分なのですが（というかそれしかできなさそう）、

データベースを利用した動的なWebアプリケーションなどの場合、
サーバーサイド側でもバリデーションを実装する必要があります。

自分の想定できる範囲でも、GoogleChromeのデベロッパーツールなどを利用すればバリデーションは解除できますし、
他にバリデーションをかいくぐる手段はたくさんあると思います。

危険！

参考