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

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

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 来确保输入值为数字，则可以对输入标签使用 type="number"属性。这添加了内置验证以拒绝非数字。

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