空值导致NaN结果

Question

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

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(); 
 
     } 
 
    }); 
 
});

<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>

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会显示“没有价值”。