JavaScriptで入力値が数字か文字かを判定する方法【isNaN()関数の使い方】
入力された値が数字か文字（数値以外）かを判定するには、JavaScriptのisNaN()関数を使用します。この関数は、値がNaN（Not a Number：非数）である場合にtrueを返します。この特性を利用することで、ユーザーが入力した値が数値かどうかを簡単にチェックできます。
isNaN()関数とは
isNaN()は「is Not a Number」の略称です。引数として渡された値が数値として解釈できない場合にtrueを、数値として解釈できる場合はfalseを返します。これにより、「入力内容が数字かどうか」をシンプルに判定できるのが特徴です。
サンプルコード
以下のコードでは、フォームの送信時に入力値が数値かどうかをチェックし、数値以外が入力された場合はアラートを表示して送信をキャンセルします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form name="checkingInput" action="" onsubmit="return checkInputIsNumber()">
値を入力してください： <input type="text" name="txtValue">
<br>
<input type="submit" value="check">
<script>
function checkInputIsNumber(){
var value = document.forms["checkingInput"]["txtValue"].value;
if (isNaN(value)){
alert("入力値は数値で指定してください");
return false;
}
}
</script>
</body>
</html>
プログラムの実行方法
上記のプログラムを実行するには、ファイル名を「index.html」として保存し、VS Codeエディタ上でそのファイルを右クリックします。表示されるメニューから「Open with Live Server」を選択すると、ブラウザでページが開きます。
実行結果
プログラムを実行すると、次のような画面が表示されます。
数値以外の値を入力して送信ボタンを押すと、アラートメッセージが表示され、フォームの送信は中断されます。
続いて、値として「100」を入力してみます。
「check」ボタンをクリックすると、入力値はクエリ文字列としてURLに付加されて送信されます。
?txtValue=yourValue.
実行結果は次のとおりです。
まとめ
isNaN()関数を使えば、追加のライブラリなしで入力値が数値かどうかを判定できます。フォームのバリデーションにおいて、ユーザーに適切な形式での入力を促すために非常に便利な手法なので、ぜひ活用してみてください。
-
JavaScriptで値が空かどうかを確認する方法
JavaScriptでは、空文字列（）と null を使った条件式で、値が空かどうかを簡単にチェックできます。たとえば、ユーザーがテキストボックスに入力せずにフォームを送信しようとした場合に、警告メッセージを表示して送信を防ぐことができます。サンプルコード以下は、フォーム送信時に入力値が空でないかを検証する完全なHTMLの例です。<!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width,
-
JavaScriptでフォーム送信時の入力値を変更する方法
JavaScriptでフォーム送信時にinput要素の値を変更したい場合は、documentオブジェクトを利用します。フォーム名とテキスト名を指定して、valueプロパティに新しい値を代入するだけで簡単に実現できます。基本構文入力値を変更するための基本構文は以下の通りです。document.yourFormName.yourTextName.value=anyValue;この構文では、「yourFormName」にフォームのname属性の値、「yourTextName」にinput要素のname属性の値を指定し、「anyValue」に設定したい新しい値を代入します。フォームの例ここでは、「Su