jQueryで値が数値かどうかをチェックする方法

金額の項目など数値で入力してもらわないといけない項目に対し、jQueryを使って数値チェックを行う方法を紹介します。

jQueryで値が数値かどうかをチェックする方法

数値チェックは $.isNumeric() を使います。

[aside type=”normal”]$.isNumeric(値)[/aside]

値は、入力項目の入力値です。

戻り値は、数値ならば true で、そうでないなら false が返ってきます。

次のようなサンプルを作成しました。

数値以外を入力したら入力項目の下に「数値を入力してください。」というメッセージが出ます。

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js?ver=1.12.2'></script>
<script type="text/javascript">
  $(function(){
    $('#price').change(function() {
      var v = $('#price').val();
      if ($.isNumeric(v)) {
        if (v >= 10000) {
          $('#feel').text('高い');
        } else {
          $('#feel').text('安い');
        }
      } else {
        $('#feel').text('数値を入力してください。');
      }
    });
  });
</script>
<input type="text" name="price" id="price">円
<div id="feel"></div>

色々な値で試してみた

まとめ

簡単ですね！

jQueryの数値チェックは$.isNumeric()を使う。

少数でもマイナスでもOK！

全角数値は無理。

ということです。