Javascriptで整数でない場合エラーにする

2023年10月3日

先日Jqueryだけで動く計算ツールを制作することがありました。
単純に計算するだけなので、PHPを使うまでもなかったことと、リアルタイム処理をするためです。

その際に困ったことが一つありました。

入力条件として整数以外が入力された場合はエラーにする。

ということです。
要は入力値に対して、スクリプトだけでエラーチェックを行うということです。
ただここで疑問に思いました。

Javascriptって整数を判定できるの？

いつものごとくググって調べて対処いたしました。
忘備録として記録いたします。

今回の内容

1. そもそもJavascriptで整数判定は可能なの?
2. まずは動作さんプルをご覧ください
3. 疑問：フォームから入力した場合整数であっても文字として渡されます。どうやっているの？
4. Javascriptで文字数字を数値変換する関数がありました
5. 注意点：Number関数は記述名に大文字小文字指定があります。

そもそもJavascriptで整数判定は可能なの?

Javascriptに「Number.isInteger()」という関数があり、この関数だけで整数判断できます。
例えば以下のような動作をします。

Number.isInteger(1)・・・整数の場合trueを返します。
Number.isInteger(1.1)・・少数の場合falseを返します。
Number.isInteger(“1”)・・整数でも文字の場合falseを返します。

まずは動作さんプルをご覧ください

まずは動作サンプルを用意いたしました。
整数チェックの動作サンプル

整数を入力するとOK判定になります

少数を入力するとNG判定になります

文字が入力されるとNG判定になります

ソースはこちら


<!doctype html>
<html>
<head>
<meta charset="shift_jis">
<title>Jquery 整数チェック</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function()
{
	$("#msg").text("数字を入力してください。");

	$("#btn").on("click", function()
	{
		if (Number.isInteger(Number($("#no").val())) == true)
		{
			$("#msg").html('<span style="color: #3C0;">入力された整数です</span>');
		}
		else
		{
			$("#msg").html('<span style="color: #f00;">入力された値は整数ではありません</span>');
		}
	});
});

</script>

<style type="text/css">
.box 
{
	padding: 20px;
	width: 400px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 30px;
	border: 1px solid #CCC;
	text-align: center;
}
#btn
{
	padding-top: 10px;
	padding-right: 30px;
	padding-bottom: 10px;
	padding-left: 30px;
	margin-top: 10px;
}
</style>
</head>

<body>

<div class="box">
<div id="msg"></div>
<input name="no" id="no" type="text" style="width:90%; padding: 10px;">
<input name="btn" id="btn" type="button" value="判定">
</div>

</body>
</html>