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

Angular JS - How do you validate the number of digits in a number input

本文关键字：数字输入 验证 JS- 何验证 Angular      更新时间：2023-09-26

我们想要做的是，有一个只接受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/Angular：

  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以内？

非常感谢。

只需将$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);
};

也许您可以使用[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>

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

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

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

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

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

如果您不想阻止用户输入两个字符，并且只想在用户输入三个或更多字符时显示验证消息，只需删除最大长度即可。

相关文章：