Question

我想在文本字段中添加数据限制。数据应从5.0开始，并在输入字段中增加到5.6。如果用户将高于5.6的数据添加到文本字段中，则应显示错误。用户只能添加5.0到5.6之间的值。

Answer 1

<input type="number" ng-model="vm.value" min="5" max="5.6" step="0.1">

JSFIDDLE

https://docs.angularjs.org/api/ng/input/input%5Bnumber%5D

的更多信息

Answer 2

您可以使用输入元素

<input type="number" ng-model="vm.model" min="5" max="5.6" step="0.1">

或者您可以在模型更改时使用正则表达式进行验证输入

$scope.$watch('vm.model', function(newVal, oldVal){
    if(!newVal || !/^5.[0-6]$/g.test(newVal)){
        /* Show validation here ... */
    }
});

Answer 3

您可以使用数字输入元素的min和max属性进行简单范围验证。

<input type="number" ng-model="vm.model" min="5" max="5.6" step="0.1">

对于任何其他复杂的验证，您可以编写自己的自定义验证函数，如下所示：

angular.module('my-app').directive('limitRange', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attr, mCtrl) {
      function myValidation(value) {
        if (value >= 5.0 && value < 5.7) {
          mCtrl.$setValidity('valueCheck', true);
        } else {
          mCtrl.$setValidity('valueCheck', false);
        }
        return value;
      }
      mCtrl.$parsers.push(myValidation);
    }
  };
});

HTML：

  <div ng-app="my-app">
    <div ng-controller="testCtrl">
      <form>
        <input type="number" step="0.01" ng-model="rate" required limit-range>
      </form>
    </div>
  </div>

CSS：

input.ng-invalid {
    background-color: pink;
}
input.ng-valid {
    background-color: lightgreen;
}

如何在Angular JS中为输入文本字段添加限制

3 个答案: