Question

我们要做的是，输入只接受0 - 24（对于时间输入应用程序）。

这些是用户应该能够输入到输入中的值：

目前的代码如下：

HTML：

        <div class="list list-inset">
            <label class="item item-input">
                <input id="time" type="number" placeholder="24" ng-model="$parent.time1" ng-change="onChange(time1)">
            </label>
            <label class="item item-input">
                <input type="tel" placeholder="24" ng-model="time2" >
            </label>
        </div>

JS /角：

  var savedTime = 0;
   $scope.onChange = function(time) {
      if (time > 23 || currentTime > 2) {
        $scope.time1 = savedTime;
      } else {
        savedTime = time;  
      };
  };

这可以很好地限制数字，但它不会阻止用户输入我们不想要的无限数量的前0个。

我尝试使用time.toString().length并使用它添加一些验证，但结果是，00000作为数字，当设置为字符串仍然变为"0"时。

有没有更好的方法将位数限制为2？

非常感谢。

Answer 1

只需将$scope.time1 = parseInt(savedTime)添加到您的功能结尾 -

var savedTime = 0;
   $scope.onChange = function(time) {
      if (time > 23 || currentTime > 2) {
        $scope.time1 = savedTime;
      } else {
        savedTime = time;  
      };
      $scope.time1 = parseInt(savedTime);
};

Answer 2

也许您可以使用[ng-maxlength =＆＃34; number＆＃34;]指令。将它设置为2，如下所示：

    <div class="list list-inset">
        <label class="item item-input">
            <input id="time" type="number" placeholder="24" ng-model="$parent.time1" ng-change="onChange(time1)" ng-maxlength="2">
        </label>
        <label class="item item-input">
            <input type="tel" placeholder="24" ng-model="time2" ng-maxlength="2">
        </label>
    </div>

Answer 3

您可以更改输入以匹配模式：

<input type="number" ng-pattern="/^[0-9]{1,2}$/" ...>

Answer 4

取决于您想要达到的效果。你可以这样做：

<input type="text" ng-pattern="/[0-9]{1,2}/" 
               maxlength="2"
               ng-model="myCtrl.title">

这将阻止用户输入任何超过2个字符。如果字符不是数字，则会将字段类设置为ng-invalid-pattern。

如果您不想阻止用户输入两个字符，只想在输入三个或更多字符时显示验证消息，只需删除maxlength。

Angular JS - 如何验证数字输入中的位数

4 个答案: