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

I have a working code for entering valid minimum and maximum value in text box by using below code:

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

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

But how about if I have multiple ranges allowed? For example: In my text box, numbers from 1 to 5 and 10 to 15 is allowed, so numbers from 6-9 and 16 & up is not allowed. How to do this using javascript/jquery or angularjs?

但是如果允许多个范围呢?例如:在我的文本框中，从1到5和10到15的数字是允许的，所以6-9和16的数字是不允许的。如何使用javascript/jquery或angularjs实现这一点?

5 个解决方案

#1

You can use the html5 pattern attribute

您可以使用html5 pattern属性

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

See here on the MDN website for further details.

详情请参阅MDN网站。

#2

Thanks for all the answers. I tried it all but I got it by using if/else statement.

谢谢你的回答。我试过了，但我是通过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

Why not just use a <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

To decouple the view from the business logic, you should use custom validators.

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

Provided you used an ngForm and ngModel for the input field like so:

假设您对输入字段使用了ngForm和ngModel，如下所示:

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

You can use the following controller:

您可以使用以下控制器:

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;
}])

The min/max directives (and others) just work like this. They add a validator to the model - which is executed each time the input changes.

最小/最大指令(和其他指令)就是这样工作的。它们向模型添加一个验证器——每次输入发生变化时都执行这个验证器。

For more information, see Angular's docs on the issue: https://docs.angularjs.org/guide/forms#custom-validation

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

#5

Try like this

这样的尝试

    <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/

#1