Javascript多字段验证答案

【问题标题】：Javascript multiple fields validatingJavascript多字段验证
【发布时间】：2020-01-16 20:17:18
【问题描述】：

首先，我必须验证 id 和密码文本框不为空（那个是有效的）。然后我必须在相同的表单上验证文本框上的 id 需要是一个数字，也是一个介于 3000 和 3999 之间的数字（那个不起作用）。关于我的代码有什么问题的任何想法？

function validatefunctions() {
  if (document.getElementById('idtb').value === '') {
    alert('You need to enter a Customer ID');
    return false;
  }

  if (document.getElementById('pwtb').value === '') {
    alert('Please enter your password');
    return false;
  }
  var custID;
  custID = document.getElementsByName("idtb").valueOf();

  if (custID !== isNan) {
    alert("Customer ID needs to be numeric");
    return false;
  }
  if (custID < 3000) {
    alert("ID must be above 3000");
    return false;
  }
  if (custID > 3999) {
    alert("ID must be below 3999");
    return false;
  }
}

【问题讨论】：

.valueOf(); 不正确。您可以使用 .value 来获取值（就像您在 yoru if 语句中所做的那样）。要检查一个字符串是否不是一个数字，你可以使用isNaN(custID)，当custID不是一个数字时它会返回true，当它是一个数字时false会返回true
developer.mozilla.org/en-US/docs/Learn/HTML/Forms/…

标签： javascript html function validation

【解决方案1】：

文本框必须是一个数字，也需要一个介于 3000 和 3999 之间的数字（那个不行）

为什么不用输入类型number指定min和max属性：

<form>
  <input type="number" name="quantity" min="3000" max="3999" value="3000">
  <input type="submit">
</form>

【讨论】：

【解决方案2】：

function validatefunctions() {
  if (document.getElementById('idtb').value === '') {
    alert('You need to enter a Customer ID');
    return false;
  }

  if (document.getElementById('pwtb').value === '') {
    alert('Please enter your password');
    return false;
  }

  var custID = document.getElementById('idtb').value;
  if (Number.isNaN(parseInt(custID))) {
    alert("Customer ID needs to be numeric");
    return false;
  }
  
  if (parseInt(custID) < 3000) {
    alert("ID must be above 3000");
    return false;
  }
  
  if (parseInt(custID) > 3999) {
    alert("ID must be below 3999");
    return false;
  }
}

<!DOCTYPE html>
<html>
<body>
<form  action="#" onsubmit="return validatefunctions()" method="post">

  Customer ID: <input type="text" name="idtb" id="idtb"><br /><br />

  Password: <input type="text" name="pwtb" id="pwtb"><br /><br />

  <input type="submit" value="Submit">

</form>
</body>
</html>

【讨论】：

您的代码接近正确，但您应该使用内置 javascript 函数的 Number 函数，该函数将返回值的数据类型。所以你只需要在你的代码中使用 Number.isNaN 函数而不是 document.getElementsByName("idtb").valueOf() 。/