将两个用户号输入存储在变量中，验证为数字，并写入两个数字的总和

Question

我有一个用html创建的表单，有两个输入字段和一个按钮。当点击按钮时，我希望调用一个函数，然后将两个数字相加，然后通过报警函数显示总和。

我知道当按钮被点击时如何调用函数，我知道如何读取并将两个输入存储在单独的变量中。

我想知道一些如何以最简单的方式验证输入为数字的技巧？

function Calculate() {
  var num1 = document.getElementById("num1").value;

  var num2 = document.getElementById("num2").value;
  num1_parsed = parseInt(num1);    

  num2_parsed = parseInt(num2);

  if (num1_parsed) {    

  } else {
    alert("Wrong input!!!");
    return false;    
  }

  var total = num1_parsed + num2_parsed;
  alert("The total sum of your numbers are: " + sum);
}

这段代码由于某种原因起作用，如果num1是正确的，但num2不是，它会给出消息NaN，而不是报警消息！

Answer 1

使用isNaN（）函数。它可能更易读，而不是&&这将意味着结果将是假的。

null

function Calculate() {

  var num1 = document.getElementById("num1").value;
  var num2 = document.getElementById("num2").value;
  
  num1_parsed = parseInt(num1);    
  num2_parsed = parseInt(num2);
  
  
 //console.log((!(isNaN(num1_parsed))).toString() + " " + num1_parsed);
 //console.log((!(isNaN(num2_parsed))).toString() +  " " + num2_parsed);

  if (!(isNaN(num1_parsed)) && !(isNaN(num2_parsed))){
  var total = num1_parsed + num2_parsed;
  alert("The total sum of your numbers are: " + total);
  
  } else {
alert("Wrong input!!!");
    return false;        
  }


}

<input id="num1" />
<input id="num2" />
<button onclick="Calculate()">Calculate</button>

Answer 2

如果可以将输入元素用作type=“number”

num1_parsed = Number(num1);
num2_parsed = Number(num2);

if (isNaN(num1_parsed) || isNaN(num2_parsed) ) {
    alert("Wrong input!!!");
    return false;
} else {
    // do stuff
    return true;        
}

Answer 3

JavaScript方法

通过JavaScript进行验证，您可以使用isNaN（）函数。如果输入不是数字，则返回true。

function Calculate() 
{
  var num1 = document.getElementById("num1").value;
  var num2 = document.getElementById("num2").value;

  num1_parsed = parseFloat(num1);    
  num2_parsed = parseFloat(num2);

  if(isNaN(num1_parsed) || isNaN(num2_parsed))
  {
      alert("Wrong input!!!");
      return false;
  } else {
      var total= num1_parsed + num2_parsed;
      alert("The total sum of your numbers are: " + total);
      return true;
  }
}

HTML5方法

此外，如果您希望使用HTML5只是为了确保输入值是number，那么您可以对input标记使用type=“number”属性。这增加了拒绝非数字数字的内置验证。

<input type="number" id="num1" />
<input type="number" id="num2" />