HTML5验证检查输入大于0

时间:2017-05-04 14:34:36

标签: html html5 validation

我的输入字段应大于0 ,我正在使用min="0.00000001"验证输入数字是> 0

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

由于我不想指定stepmin,我只想验证输入数字是否大于0。

有没有更好的方法来比较输入?例如input > 0min > 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>

2 个答案:

答案 0 :(得分:3)

没有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>

答案 1 :(得分:0)

是的,您可以使用^(0*([0-9]|[1-8][0-9]|9[0-9]|100))$正则表达式来获取结果。

只需将输入的类型从数字更改为文本,然后添加Pattern =“ ^(0 *([0-9] | [1-8] [0-9] | 9 [0- 9] | 100))$“。

它将正常工作,没有任何问题。

<form>
   <input type="text" pattern="^(0*([0-9]|[1-8][0-9]|9[0-9]|100))$" title="Enter Valid value" name="number" />
   <input type="submit" class="submit" value="Save" />
</form>