这取决于你想要的是int还是float字段。下面是这两款游戏的外观:

<input type="number" name="int-field" id="int-field" placeholder="positive int" min="1" step="1">
<input type="number" name="float-field" id="float-field" placeholder="positive float" min="0">

int字段附加了正确的验证，因为它的最小值是1。然而，float字段接受0;为了解决这个问题，你可以添加一个约束验证器:

function checkIsPositive(e) {
  const value = parseFloat(e.target.value);
  if (e.target.value === "" || value > 0) {
    e.target.setCustomValidity("");
  } else {
    e.target.setCustomValidity("Please select a value that is greater than 0.");
  }
}

document.getElementById("float-field").addEventListener("input", checkIsPositive, false);

JSFiddle这里。

注意，这些解决方案都不能完全阻止用户尝试输入无效的输入，但是您可以调用checkValidity或reportValidity来确定用户是否输入了有效的输入。

当然，您仍然应该进行服务器端验证，因为用户总是可以忽略客户端验证。

添加一个min属性

<输入类型=“数字” min=“0”>

这取决于你想要多精确。如果你想只接受整数，那么:

<输入类型=“数字” 分钟=“1” 步数=“1”>

例如，如果你想要浮点数，小数点后有两位数字:

<输入类型=“数字” min=“0.01” 步数=“0.01”>

我认为使用类型文本是最好的，而不是数字，因为使用类型=数字，你将面临一些问题，如输入字段的方向键和上、下键的值变化。

<input type="text" onkeypress="return event.charCode>=48 && event.charCode<=57" />

你可以使用以下命令使type="number"只接受正数:

<input type="number" step="1" pattern="\d+">

如果需要文本输入，该模式也可以工作

<input type="text" pattern="\d+">