フォームに入れた値が文字列でないかを調べよう

フォームに入れた値が文字列だった場合、計算を始める前に警告を表示したいということがあります。前回まで作成してきたcalculate関数に入力内容のチェックを入れてみます。

function calculate(){
    var form1 = document.querySelector("#form1");
    var num1 = form1.value;

    if (typeof num1 == "number") {
        //処理を続ける
    } else {
        window.alert("form1に入れた値は数字ではありません");
    }

    //以下省略
}

このように変数の型を調べて、その結果からif文で数字出なかった場合は警告を出すということができますが、ここで一つ問題なのは、document.querySelector()のvalueで取得した値は数字を入力していても文字列として返ってくるという点で、typeof numで型を調べると、string(文字列)として認識されてしまいます。。何とかフォームに入力した値が数字であると確認するために、文字列をparseIntしてから調べるという手段があります

num1 = parseInt(num1);で値を整数に変換する際、元の変数の値が数字以外だった場合、NaN(数字ではない)という値で返っています。この状態でisNaN関数を使って、変数が数字でないかを調べることができます。 isNan関数は変数の値が数字ではないときにtrue(真)を返すので、

function calculate(){
    var form1 = document.querySelector("#form1");
    var num1 = form1.value;

    //変数に入れた値を数字に変換する
    num1 = parseInt(num1);

    //文字列をparseIntすると値がNaNになるため、isNaN(変数)で変数の値を調べるとtrueが帰ってくる
    if (isNaN(num1) == true) {
        window.alert(“form1に入力した値は数字ではありません”);
    } else {
        //処理を続ける
    }

    //以下省略
}

ということで、フォームに入力した値を調べることができ、より確実に処理を進めることが可能となります。