提交表单时通过 JS 验证号码答案

【问题标题】：number validation via JS on submitting a form提交表单时通过 JS 验证号码
【发布时间】：2020-05-14 02:07:51
【问题描述】：

我不确定我做错了什么...当我不输入任何内容并提交时，似乎无法让此表单显示警报...

        <script>
                    function validate() {
                        var n1 = document.forms["GoToPage"]["page"].value;
                        if ( isNaN(n1) ) {
                            return true;
                        } else {
                            alert("Must be a Number!");
                            return false;
                        }
                    }
        </script>
<form name="GoToPage" method="GET">
<input type="number" min="1" max="1000" name="page" size="4" />
<input type="submit" value="Go" onclick="return validate();" />
</form>

【问题讨论】：

逻辑错误，isNaN如果将值转换为数字结果为NaN，则返回true。如果用户输入说“2”（注意表单控件的值始终是字符串），那么isNaN('2') 将返回false 并执行到else 分支。此外，验证应该在表单的提交处理程序上，而不是按钮上，因为您可以在不点击按钮的情况下提交表单。

标签： javascript validation onclick onsubmit

【解决方案1】：

如果你想检查 n1 是一个数字，使用

if ( !(isNaN(n1)) ) {
    return true;
 }

如果 n1 是数字，它将返回 true。

如果您没有发送任何内容，isNaN 将为 false。

console.log(!(isNaN(''))); //if you use the code above
console.log(isNaN(''));

如果您没有发送任何内容，请使用它来返回 false

if ( !(isNaN(n1)) && n1!='' ) {
    return true;
}

它看起来像这样

<script>
  function validate() {
      var n1 = document.forms["GoToPage"]["page"].value;
      if ( !(isNaN(n1)) && n1!='' ) {
          alert("It's a Number!");
          return true;
      } else {
          alert("It's not a Number!");
          return false;
      }
  }
</script>
<form name="GoToPage" method="GET">
<input type="number" min="1" max="1000" name="page" size="4" />
<input type="submit" value="Go" onclick="return validate();" />
</form>

【讨论】：

感谢@Warmoa 的回复，但我仍然没有收到任何警报...使用您的第二段代码，我收到了Parse error: syntax error, unexpected '' ) {' (T_CONSTANT_ENCAPSED_STRING) 错误
我已将我的编辑添加到您的代码中，请尝试一下
我无法解释为什么@warmoa 但是当我在我的服务器上尝试它时，表单仍然得到处理，警报没有显示......这几乎就像 javascript 被忽略了......

【解决方案2】：

RobG 提到你的逻辑是错误的。

function validate() {
  var n1 = document.forms["GoToPage"]["page"].value;
  if (n1.length>0) {
    return true;
  } else {
    alert("Must be a Number!");
    return false;
  }
}

<form name="GoToPage" method="GET" onsubmit="return validate();">
  <input type="number" min="1" max="1000" name="page" size="4" />
  <input type="submit" value="Go" />
</form>

我检查了代码，它按预期工作。我认为输入类型是数字，js会把它当作数字。所以，我认为 NaN 总是在逃跑。

【讨论】：

逻辑错误，isNaN如果值为NaN则返回true，所以表单不应该提交。如果该值不是 NaN（即该值可以通过 Number(value) 转换为非 NaN 数字），则应提交表单，但它会引发警报。
好的，谢谢。我只是说他的代码有效，至少显示了他没有得到的警报。我没有看到逻辑！
感谢您的回复@BiploveLamichhane - 我已尝试使用您的n1.length>0 逻辑，但不知何故（我不明白为什么）即使我没有输入任何内容，我的表单仍在提交.. . 你可以在这个页面的底部看到它：chaindlk.com/reviews/
我现在已经编辑了答案。你现在可以做......但它的种类是一样的......