jQuery 入力値が数値かどうかをチェックする方法
環境
jquery 3.6.3
Google Chrome 109.0.5414.120
Windows10 Home 64bit
書式
var 変数名 = $('#セレクタID名’).val();
$.isNumeric(変数名)
数値チェックは $.isNumeric() を使います。
使用例
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
$(function(){
$('#age').change(function() {
var tt = $('#age').val();
if ($.isNumeric(tt)) {
if (tt >= 88) {
$('#res').text('ttt111');
} else {
$('#res').text('22222');
}
} else {
$('#res').text('数値を入力してください。');
}
});
});
</script>
</head>
<body>
<input type="text" name="age" id="age">
<div id="res"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
$(function(){
$('#age').change(function() {
var tt = $('#age').val();
if ($.isNumeric(tt)) {
if (tt >= 88) {
$('#res').text('ttt111');
} else {
$('#res').text('22222');
}
} else {
$('#res').text('数値を入力してください。');
}
});
});
</script>
</head>
<body>
<input type="text" name="age" id="age">
<div id="res"></div>
</body>
</html>
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> <script> $(function(){ $('#age').change(function() { var tt = $('#age').val(); if ($.isNumeric(tt)) { if (tt >= 88) { $('#res').text('ttt111'); } else { $('#res').text('22222'); } } else { $('#res').text('数値を入力してください。'); } }); }); </script> </head> <body> <input type="text" name="age" id="age"> <div id="res"></div> </body> </html>
実行結果
数値以外を入力したら入力項目の下に「数値を入力してください。」というメッセージが出ます。