この記事でわかること
- 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のデベロッパーツールなどを利用すればバリデーションは解除できますし、
他にバリデーションをかいくぐる手段はたくさんあると思います。
危険！