在运行计算之前验证表单答案

【问题标题】：Validate a form before running calculations在运行计算之前验证表单
【发布时间】：2016-04-14 17:31:50
【问题描述】：

我正在做一个提交两个数字的简短项目。一个必须至少为 100，第二个不能超过 100。运行三个计算，然后打印回来。

我尝试了各种方法，但我无法让javascript停止提交无效数字的函数。该表单将返回 0，但这是迄今为止我发现的最好的。

我正在尝试做的事情：

输入号码
验证数字 - 如果无效，立即停止，打印错误 - 如果有效，继续
继续计算
打印结果

Codepen：http://codepen.io/uggh/pen/bpvmdz

function checkNumbers() {
  if (isNaN(sqft.value) == true) {
    returnError.innerHTML = "Please insert number A";
  } else if (isNaN(desired.value) == true) {
    returnError.innerHTML = "Please insert number B";
  }
}

【问题讨论】：

标签： javascript forms validation input

【解决方案1】：

从checkNumbers 函数调用您的Calculate 函数

function checkNumbers() {
  if (isNaN(sqft.value) == true) {
    returnError.innerHTML = "Please insert number A";
  } else if (isNaN(desired.value) == true) {
    returnError.innerHTML = "Please insert number B";
  }


 else{
    return calculate();
    }
}

【讨论】：

【解决方案2】：

您可以将 onclick 更改为如下所示：

if(checkNumbers()){calculate();compare();food();}

如果一切正常，则让您的函数 checkNumbers() 返回 true，如果出现错误，则返回 false。

【讨论】：

【解决方案3】：

一种方法是让checkNumbers 返回一些可以在if 语句中检查的内容，以决定是否继续处理。无论checkNumbers 内部发生什么，您当前的代码都会调用calculate。

此外，您检查数字字段的测试是错误的：如果一个不是有效数字，则其 value 是一个空字符串。

【讨论】：