AngularJS中的數字驗證範圍

Question

我正在使用AngularJS創建一個項目，我希望將驗證集成到AngularJS中。我的要求是這個數字應該在AngularJS的1-4096之間。

這裏是我的代碼：

<div class="col-lg-6 col-md-6"> 
    <input type="text" class="form-control" placeholder="VLAN ID" ng-model="exchange.vlanId" valid-number/> 
</div> 

Answer 1

您應該創建非常簡單的指令，將允許驗證輸入的可重複使用的，可配置的，聲明的方式。

你已經有valid-number屬性，因此實現可以是這樣的：

angular.module('demo', []).directive('validNumber', [function() { 
 
    return { 
 
     require: 'ngModel', 
 
     link: function(scope, elem, attrs, ctrl) { 
 
      if (!ctrl) return; 
 
      var range = attrs.validNumber.split(',').map(Number); 
 
      ctrl.$validators.validNumber = function(value) { 
 
       return value >= range[0] && value <= range[1]; 
 
      }; 
 
     } 
 
    }; 
 
}]);

.error {color: brown;}

<script src="https://code.angularjs.org/1.4.8/angular.min.js"></script> 
 

 
<div ng-app="demo"> 
 
    
 
    <form name="form"> 
 
     <input type="text" class="form-control" placeholder="VLAN ID" name="vlanId" 
 
       ng-model="exchange.vlanId" valid-number="1,4096" /> 
 
    </form> 
 
    
 
    <div class="error" ng-show="form.$dirty && form.vlanId.$error.validNumber">VLAN ID should be in range 1-4096.</div> 
 
</div>

Answer 2

您可以在事件上的輸入與傳遞模型綁定和調用一個函數：

<input type="text" class="form-control" placeholder="VLAN ID" 
     ng-model="exchange.vlanId" 
     ng-keydown="obj.validate(exchange.vlanId)" valid-number/> 

現在，在控制器，你可以定義方法：

yourApp.controller('theController', ['$scope', function($scope){ 
    $scope.obj = { 
     validate:function(val){ 
      if(val < 1 || val > 4096){ 
       alert(val+' is out of range'); 
      } 
     } 
    }; 
}]); 

---

而且該指令valid-number也可用於：

yourApp.directive('validNumber', function($scope){ 
    return { 
     restrict:'E', 
     link:function(scope, el, attrs){ 
      el.on('keydown', function(){ 
      el.css('border', function(){ 
       return scope.exchange.vlanId < 1 || scope.exchange.vlanId > 4096 
       ? "red" : "green"; 
      }); 
      }); 
     } 
    }; 
});