要使用 ng-pattern（angular 的新功能）验证输入是否仅为最小值和最大值为 0-10000 的数字？

Question

我有两个数字类型的输入字段，它允许最小值 0 和最大值的范围 10000.how 我是否会让这两个字段都允许最大值和最小值之间的数字没有超出该范围的值。

我已尝试使用以下代码，请查看并提供帮助

<div class='panel'>
    <span>Min: $&nbsp;</span>
    <input id="text-input-1" class="width" type="number" placeholder="USD " ng-model="vm.min" ng-pattern="/^[0-9]{1,7}$/">
    <span>Max: $&nbsp;</span>
    <input id="text-input-1" class="width" type="number" placeholder="USD " ng-model="vm.max" ng-pattern="/^[0-9]{1,7}$/">
</div>

但是，根据我的问题，我只想在用户输入字段中不允许超出我 range.rather 显示消息

的值

Answer 1

您可以使用 <input type="number"/> 的 min 和 max 属性并检查字段的有效性。

  <input id="text-input-1" min="0" max="10000" class="width" type="number" placeholder="USD" ng-model="vm.min">

或者您可以使用 ng-change 通过更新值来强制最小值和最大值，如果它是 greater/smaller 而不是最小值和最大值，但我认为第一种方法更好。

html

<input id="text-input-1" type="number" ng-model="value" ng-change="setConstraints(value)">

js

  $scope.setConstraints = function(value){
    if(value > 10000){
      $scope.value = 10000;
    }

    if(value < 0){
      $scope.value = 0;
    }
  }

Demo

要使用 ng-pattern（angular 的新功能）验证输入是否仅为最小值和最大值为 0-10000 的数字？

To validate input to be only numbers with a limit of min and max 0-10000 using ng-pattern(new to angular)?

html

javascript

regex

angularjs

ng-pattern