Question

当输入字段为空时，我的表单会显示NaN。你能帮我解决这个问题吗？这是我的代码：

＆＃13;

function dailyRate () {
    var monthlyRate = parseInt(document.getElementById("txt1").value);
    var months = 12;
    var workingDays = parseInt(document.getElementById("txt2").value);
    var totalDailyRate = (monthlyRate * months) / workingDays;
    document.getElementById("totalRate").innerHTML = Math.round(totalDailyRate);
}

$(document).ready(function() {
    $("#mainForm").submit(function(e){
        e.preventDefault();
    });
    $("#txt2, #txt1").keydown(function (e) {
        // Allow: backspace, delete, tab, escape, enter and .
        if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
             // Allow: Ctrl+A
             (e.keyCode == 65 && e.ctrlKey === true) ||
             // Allow: Ctrl+C
             (e.keyCode == 67 && e.ctrlKey === true) ||
             // Allow: Ctrl+X
             (e.keyCode == 88 && e.ctrlKey === true) ||
             // Allow: home, end, left, right
             (e.keyCode >= 35 && e.keyCode <= 39)) {
             // let it happen, don't do anything
                 return;
        }
        // Ensure that it is a number and stop the keypress
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
             e.preventDefault();
        }
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form name="mainForm" id="mainForm" action="" onsubmit="return dailyRate()" method="post">
<input type="text" id="txt1" name="text1" placeholder="monthlyrate">
<input type="text" id="txt2" name="text2" placeholder="workingDays">
<p id="alerttext"></p>
<button>Submit</button>
<p id="totalRate"></p>
</form>

＆＃13;

Answer 1

检查值是否为NaN。如果是NaN，则可以将值设置为0或显示错误消息：

var textField1 = document.getElementById("txt1");
var textField2 = document.getElementById("txt2");

var monthlyRate = parseInt(textField1.value);
var workingDays = parseInt(textField2.value);

if (isNaN(monthlyRate)) {
    textField1.value = 0;
    monthlyRate = 0;
}

if (isNaN(workingDays)) {
    textField2.value = 0;
    monthlyRate = 0;
}

OR：

if (isNaN(totalDailyRate)) {
    document.getElementById("totalRate").innerHTML = "Please enter valid numbers";
} else {
    document.getElementById("totalRate").innerHTML = Math.round(totalDailyRate);
}

建议：如果您使用<input type="number">，现代浏览器会显示用于增加和减少输入字段中数字的控件。

Answer 2

如果内容不是数字，函数parseInt()将返回NaN，在您的情况下，如果控件为空，则返回getElementById将返回空字符串。所以你可能在使用它之前应该进行一些验证，例如：

 var monthlyRate = parseInt(document.getElementById("txt1").value);
 var months = 12;
 var workingDays = parseInt(document.getElementById("txt2").value);

 if (isNaN(monthlyRate) || isNaN(workingDays)) {
    document.getElementById("totalRate").innerHTML = 'No value';
    return;
}

在上面的示例中，如果任何值无效，则totalRate将显示“无值”。

空值导致NaN结果

2 个答案: