文本框的多个最小值和最大值答案

【问题标题】：Multiple Min and Max value for textbox文本框的多个最小值和最大值
【发布时间】：2016-05-04 20:35:56
【问题描述】：

我有一个工作代码，可以使用以下代码在文本框中输入有效的最小值和最大值：

<input type="number" name="quantity" min="1" max="5">

但是如果我允许多个范围呢？例如：在我的文本框中，允许 1 到 5 和 10 到 15 的数字，因此不允许 6-9 和 16 及以上的数字。如何使用 javascript/jquery 或 angularjs 做到这一点？

【问题讨论】：

你可以使用正则表达式
你需要创建一个directive。

标签： javascript jquery angularjs html

【解决方案1】：

可以使用html5的pattern属性

<input type="text" name="quantity" pattern= "(1|2|3|4|5|10|11|12|13|14|15)" />

更多详情请参见here on the MDN 网站。

【讨论】：

谢谢，但我给的号码只是我的例子。我有大数字，例如： 100-1000 ， 2000-3000 之类的。
您可以继续添加模式以将其限制为您想要的数字。查看这篇文章，了解如何在1-1000 之间匹配数字的详细信息您可以调整此正则表达式以满足您的需求。不使用 JS，除了使用 pattern stackoverflow.com/questions/4484168/regex-for-range-1-1000 之外，我不知道任何其他方式
谢谢保罗，我先检查一下。
这不是一个好的答案，因为pattern 不适用于number 类型的输入。来自文档：当 type 属性的值为 text、search、tel、url、email 或 password 时，此属性适用；否则将被忽略.
@BramVanroy 很好发现，我没有意识到这一点。 input type="text"会有什么不好的影响吗？

【解决方案2】：

感谢您的所有回答。我尝试了所有方法，但我通过使用 if/else 语句得到了它。

if (txt>=1 && txt<=5){
  return true
}
if (txt>=10 && txt<=15){
  return true
}
if (txt>=20 && txt<=25){
  return true
}else{
  alert("invalid")
  return false
}

【讨论】：

【解决方案3】：

为什么不直接使用<select>？

<select name="quantity">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="10">10</option>
      <option value="11">11</option>
      <option value="12">12</option>
      <option value="13">13</option>
      <option value="14">14</option>
      <option value="15">15</option>
</select>

【讨论】：

谢谢但我必须在文本框中输入数字，我给定的数字只是一个例子。如果我的范围从十分之一到数千呢？

【解决方案4】：

要将视图与业务逻辑分离，您应该使用自定义验证器。

假设您使用 ngForm 和 ngModel 作为输入字段，如下所示：

<div ng-controller="InputController as inputCtrl">
  <ng-form name="testForm">
    <input type="text" name="testModel" ng-model="testModel"/>
  </ng-form>
</div>

您可以使用以下控制器：

app.controller('InputController', ['$scope', function($scope) {
    var validator = function(modelValue, viewValue) {
        var isRange1To5 = modelValue >= 1 && modelValue <= 5;
        var isRange10To15 = modelValue >= 10 && modelValue <= 15;

        return isRange1To5 || isRange10To15;
    };

    $scope.testForm.testModel.$validators['rangeValidator'] = validator;
}])

最小/最大指令（和其他指令）就是这样工作的。他们在模型中添加了一个验证器 - 每次输入更改时都会执行该验证器。

有关更多信息，请参阅 Angular 的有关该问题的文档： https://docs.angularjs.org/guide/forms#custom-validation

【讨论】：

【解决方案5】：

这样试试

    <form name="form1" action="">
        <input type="text" name="quantity" pattern="[1-9][0-9]{2}|1000|2[0-9]{3}|3000" />
        <input type="submit" value="submit">
    </form>

https://jsfiddle.net/ecxqhjkp/1/

【讨论】：