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

Question

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

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

0
1
2
3
4
5
6
7
8
9
00
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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并使用它添加一些验证，但是结果是，当设置为string时， 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 =“ number”]指令。 像这样设置为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。