Jqueryで数字をチェックしてみた

2024年10月15日

入力された値が数字かどうかのチェックは、フォームを使う場合は必須ともいえます。
郵便番号、電話番号など数字のみの入力が想定されるためです。

PHP側でチェックする方法、フォーム自体でチェックする方法などありますが、今回はJqueryでチェックする方法について調べてみました。

忘備録として記録いたします。

今回の内容

1. まずはできたものがこちら
2. Jqueryには数字かどうかを判断する関数があります。
3. ソースはこちら
4. 全角数字を数字として扱うことはできないものか？
5. 全角を半角に変換してからチェックすれば全角数字チェックが実現できます。
6. プログラミングは技術より発想が大事

まずはできたものがこちら

こういったものは、論より証拠です。
Jqueryで数字チェックをしているフォーム

Jqueryには数字かどうかを判断する関数があります。

PHPで数字チェックをする場合は、is_numeric()関数を使用します。
数字ならtureを返す関数です。

これと同じことをするJqueryの関数が$.isNumeric()関数です。
機能が同じで、名前もどことなく似ています。

注意点としては、Jqueryの記述方法が独特な点です。
通常Jqueryでは、セレクタを基準に関数を指定しますが、この$.isNumeric()関数では、セレクタを指定しません。

なので、$. という記述をします。

具体的には次のように記述します。


var no = 123;

if ($.isNumeric(no) == true)
{
    // 数字の場合の処理
}
else
{
    // 数字でない場合の処理
}

var no = 123;

if ($.isNumeric(no) == true)

{

// 数字の場合の処理

}

else

{

// 数字でない場合の処理

}

Jquery独特の$(タグ名など)の記述がない、独立した関数です。
これを使用して、サンプルは数字判断をしています。

ソースはこちら

フォームに何か入力されたのをトリガーにして、数字チェックをしています。

<!doctype html>
<html>
<head>
<meta charset="shift_jis">
<title>数字チェック</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function()
{
	$("#notext").keyup(function()
	{
		var msg = "<span class='err'>半角数字でない値が含まれています。</span>";

		if ($.isNumeric($("#notext").val()) == true)	// 数字　?
		{
			msg = "<span class='ok'>入力値は半角数字です</span>";
		}

		$("#msg").html(msg);
	})

});

</script>

<style type="text/css">

body 
{
	margin: 0px;
	padding: 0px;
	text-align: center;
}

.box
{
	padding: 20px;
	width: 500px;
	border: 1px solid #ddd;
	margin-right: auto;
	margin-left: auto;
	margin-top: 30px;
}

.box input
{
	padding: 4px;
	margin-bottom: 10px;
}

.ok
{
	color: #6C0;
}

.err
{
	color: #F00;
}

</style>
</head>
<body>

<div class="box">
<p>数字を入力してください。</p>
<input name="" type="text" id="notext">
<div id="msg"></div>

</div>
</body>
</html>