接受数字范围的模式？ [复制]

Question

我应该使用什么模式来接受数字范围，例如 100 - 200？

<input type="text" pattern="" name="numRange">

如果可以确保最小值低于最大值。即 100 - 200 这里 100 应该低于 200。谢谢！

Answer 1

正如revo 在 cmets 中提到的，您可以像这样验证数字范围：

<form action="somefile.php">
  <input type="number" step="1" min="100" max="200" id="numRange">
</form>

正则表达式方法（不推荐）：

var input = document.getElementById('numRange');

input.oninvalid = function(event) {
  event.target.setCustomValidity('number range should be betweeb 100-200')
}

<form action="somefile.php">
  <input type="text" name="number" placeholder="100-200" pattern="^(1\d\d|200)$" id="numRange">
</form>

这两种方法的主要区别是第一种使用type="number"，第二种依赖正则表达式javascript并使用type="text"。