HTML5 验证检查输入大于 0

Question

我有一个输入字段，它应该 大于 0，我正在使用 min="0.00000001" 来验证输入数字是否大于 0。

<input type="number" step="0.00000001" min="0.00000001" name="price" value="[%price%]" />

因为我不想指定step和min，所以我只想验证输入的数字是否大于0。

有没有更好的方法来比较输入？例如 input > 0 或 min > 0

我搜索了一种解决方案，但没有使用 step+min。

找不到解决方案

只使用html5，我们能做到吗？感谢您的帮助

<form method="post">
  <b>Number Input:</b>
  <input type="number" step="0.00000001" min="0.00000001" name="number" value="" />
  <input type="submit" class="submit" value="Save" />
</form>

Answer 1

如果没有 JavaScript，在纯 HTML5 中无法做到这一点。如评论中所述，无法使用 pattern 属性。

但这可以使用简单的 JavaScript 代码来处理，通过 oninput 属性调用，并使用 setCustomValidity:

<form method="post">
  <b>Number Input:</b>
  <input type="number" step="any" min="0"  name="number" value="" 
         oninput="check(this)" />
  <input type="submit" class="submit" value="Save" />
</form>
<script>
 function check(input) {
   if (input.value == 0) {
     input.setCustomValidity('The number must not be zero.');
   } else {
     // input is fine -- reset the error message
     input.setCustomValidity('');
   }
 }
</script>

HTML5 验证检查输入大于 0

HTML5 validation check input bigger than 0

html

validation