toString().length在一个只包含0的数字上总是返回0。

Question

我正在处理一个页面，接受用户输入4位数字（恰好4位）的密码。类似这样。

<input type="number" ng-model="passCode" class="form-control" onpaste="return false" id="passCodeField"  ng-disabled="!enablePassCode" ng-change="onInputPasscode()" ng-keypress="onKeyPressPasscode($event)"/>

onKeyPressPasscode function

$scope.onKeyPressPasscode = function($event) {
    if(isNaN(String.fromCharCode($event.which || $event.keyCode))){
        $event.preventDefault();
     }
}

onInputPasscode()函数：

$scope.onInputPasscode = function() {
    if ($scope.passCode.toString().length > 4){
        $scope.passCode = $scope.passcode;
    }
    if($scope.passCode.toString().length == 4) {
         $scope.passcode = $scope.passCode;
         $scope.disableContinue = false;
         session.put('pinFlow',true);
    } else {
         console.log("current length - " + $scope.passCode);
         $scope.disableContinue = true;
         session.put('pinFlow',false);
    }

}

这个问题在输入全零时失败。也就是说，当前长度没有更新，因此用户可以随意输入多个零。我如何接受4位数字零作为输入，并仍满足我的检查要求？

这是在angular 1.5.8v中的问题。而我不是AngularJS专家。所以任何帮助都将不胜感激。另外，请让我知道是否需要其他信息，我会相应地更新答案。

提前致谢。

- shadow_coder

---

在我看来，你不应该使用 input type=number 来作为 PIN 输入字段的类型，因为 PIN 不是数字类型。相反，应该使用 input type=text 或者更好的选择是 input type=password。此外，我也不会监听 keypress 事件，而是使用 input 事件。 - connexo

Answer 1

如果使用 type 属性设置为 number，就无法实现这个功能。当用户输入数字 0001 时，实际上是 1。

像 PIN 码这样的东西应该使用 type 属性设置为 text 来处理。然后可以使用正则表达式进行验证。

要允许恰好四个数字，不多也不少，请使用以下正则表达式：

^\d{4,4}$

从JavaScript中，可以使用以下正则表达式测试字符串：

/^\d{4,4}$/.test('1234')
// => true

/^\d{4,4}$/.test('123456')
// => false

/^\d{4,4}$/.test('12')
// => false

- Lazar Ljubenović

---

前导零是有效浮点数方案的一部分，应该在input[type="number"]的value中保留。如果浏览器没有这样做，则存在错误。HTMLInput.value始终返回一个字符串，如果您想要数字等价物，则可以通过input.valueAsNumber访问它。 - Kaiido

\d{4} seems simpler than \d{4,4} - Nick

Answer 2

你的问题原因是，如果你的 PIN 方案允许前导零，那么 number 类型不是理想的类型（因为在数字中，前导零可以省略而不改变含义）。

相反，使用 input type=text 或者更好的是 input type=password。此外，我不会使用 keypress - 而是使用 input 事件。

- connexo