Question

我正在创建一个会员注册表，在那里他输入会员卡号。会员卡号码是一个19位数字，以6 4开头，然后是13位数。现在用户可以选择单独输入最后13位数字，或者甚至可以输入完整的19位数字。当他在模糊事件中输入完整的19位数字时，我修剪前6位数字，留下最后13位数字。我的代码适用于所有场景，但在特定情况下发生错误时会发生奇怪的事情。

工作方案

如果用户键入的内容少于13位或更多，则为19位，我有一个正则表达式，用于验证用户输入并显示错误消息。
如果用户只输入13位数字，则为
如果用户输入完美的19位数，但他的起始位数不是4位，那么就会显示错误。

失败的场景

但是，当用户键入任何数字＆gt; 13并且＆lt; 19错误消息被触发但我的输入字段变空时，即任何用户输入的信息都消失了。 此角度库问题

请找到以下代码 -

HTML

    <input type="text" ng-model="user.CardNumber" ng-blur="trimCardNumber()" ng-required="true" ng-pattern="/^[0-9]{13,19}$/" name="CardNumber">

Controller.JS

    $scope.trimCardNumber = function () {
    if (($scope.user.CardNumber).indexOf("444444") > -1) {
        $scope.user.CardNumber = ($scope.user.CardNumber).replace("444444", "");
        $scope._ServerForm.CardNumber.$invalid = false;
        return true;
    }
    else if ($scope.user.CardNumber.length != 13) {
        $scope._ServerForm.CardNumber.$invalid = true;
    }
    else {
        $scope._ServerForm.CardNumber.$invalid = false;
    }
}

我为这个问题创建了一个JS小提琴 - http://jsfiddle.net/achyut/x69hZ/1/

重现的步骤 -

输入444444123456789012并模糊以查看问题

Answer 1

该问题在以下主题

中讨论

input not showing invalid model values

您可以创建自定义指令并相应地对其进行验证。

Answer 2

由于摘要周期的运作方式，这种情况正在发生。

当模糊发生时，trimCardNumber（）从输入中删除六个4。

$scope.user.CardNumber = $scope.user.CardNumber.replace("444444", "");

因为在摘要周期中某些内容发生了变化，所以它会变脏，因此会触发第二轮。在第二轮中，输入现在具有较少的数字，这导致正则表达式使其无效并清理user.CardNumber模型。

例如，此卡号（19位数）将失败：4444441111111111111因为删除4后它将被正则表达式无效。

如果您将正则表达式更改为接受12到19，则上面的数字将起作用，但是18个数字也会失败。

这是fiddle

我认为解决方案是将正则表达式移到trimCardNumber（）中，或者甚至更好，您可以为输入创建custom validation。

验证失败时角度输入字段为空

2 个答案: