Javascript 如何确保表单中的用户类型正确_Javascript_Html_Forms

Javascript 如何确保表单中的用户类型正确

javascript html forms

Javascript 如何确保表单中的用户类型正确,javascript,html,forms,Javascript,Html,Forms,我在w3schools网站上找到了这个例子- <!DOCTYPE html> <html> <body> <h2>JavaScript Can Validate Input</h2> <p>Please input a number between 1 and 10:</p> <input id="numb"> <button type="button&qu

我在w3schools网站上找到了这个例子-

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Can Validate Input</h2>

<p>Please input a number between 1 and 10:</p>

<input id="numb">

<button type="button" onclick="myFunction()">Submit</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x, text;

  // Get the value of the input field with id="numb"
  x = document.getElementById("numb").value;

  // If x is Not a Number or less than one or greater than 10
  if (isNaN(x) || x < 1 || x > 10) {
    text = "Input not valid";
  } else {
    text = "Input OK";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>

当我输入9时，它会显示“输入OK” 当我输入11时，它表示“输入无效” 但我有以下问题-

我如何强制用户键入我想要的正确类型，但如果他们不这样做，则不允许他们提交或重新输入。

您正在比较字符串和数字！您应该将x解析为如下所示的整数：

x = parseInt(document.getElementById("numb").value);

例如，有几种方法可以监听输入上的更改。一种方法是，只需更改上面示例中的代码，即可切换到侦听数字字段上的更改作为验证的触发器：

<input id="numb" onChange="myFunction()">

<button type="button" >Submit</button>

然后，您可以在myFunction中添加更多逻辑，以确保在数字有效之前不能按下按钮，以此类推，请参阅一个工作示例，该示例阻止用户在输入有效之前按下按钮：

像这样

假设您想要范围限制，您可以将type=number、min=1和max=10组合使用来实现这一点

要防止重新输入，需要禁用该字段

document.getElementByIdnumb.disabled=true

因此，您的代码变成：

if (isNaN(x) || x < 1 || x > 10) {
    text = "Input not valid";
    document.getElementById("numb").disabled = true;
  } else {
    text = "Input OK";
  }

将需要一系列值的if条件更改为适合您的需要。请注意，如果您使用带有min和max属性的number类型的输入，则不需要此js。查看信息是的，建议使用输入类型编号。但我在min和max案例中看到的是，只有当用户使用向上和向下箭头键更改值时，此限制才起作用，但用户仍然可以键入超出范围的任何数字。因此，如果你想控制它，你可以在你的输入上有一个onChange处理程序，在每次更改时检查值是否超出范围，并将其更改回max/min。例如，如果值是12，你可以将其更改回10，因为它是这里的最大值。

if (isNaN(x) || x < 1 || x > 10) {
    text = "Input not valid";
    document.getElementById("numb").disabled = true;
  } else {
    text = "Input OK";
  }