javascript - 使用 AngularJS 指令，如何绑定(bind)到输入字段上的 keyup 事件，并在正则表达式检查失败时将模型恢复为之前的值？

Question

在 AngularJS 中进行快速 POC，只允许在文本框中输入特定内容。

目标是在每次用户输入新字符时检查该值，如果未通过正则表达式检查，我们需要拒绝该字符或将其回滚到之前的值。

在我看来，这是我的两个选择:1. 绑定(bind)到按键事件，根据正则表达式检查新值是什么，如果失败则返回 false，防止字符被接受到文本框中2. 绑定(bind)到 keyup 事件，根据正则表达式检查新值是什么，如果失败，则将其恢复为之前的值

如何根据我的指令实现此目的？

var currencyRegEx = /^\$?\-?([1-9]{1}[0-9]{0,2}(\,\d{3})*(\.\d{0,2})?|[1-9]{1}\d{0,}(\.\d{0,2})?|0(\.\d{0,2})?|(\.\d{1,2}))$|^\-?\$?([1-9]{1}\d{0,2}(\,\d{3})*(\.\d{0,2})?|[1-9]{1}\d{0,}(\.\d{0,2})?|0(\.\d{0,2})?|(\.\d{1,2}))$|^\(\$?([1-9]{1}\d{0,2}(\,\d{3})*(\.\d{0,2})?|[1-9]{1}\d{0,}(\.\d{0,2})?|0(\.\d{0,2})?|(\.\d{1,2}))\)$/;
app.directive("currencyInput", function () {
    return {
        restrict: "A",
        scope: {
        },
        require: 'ngModel',
        link: function (scope, element, attrs, ngModelCtrl) {
            $(element).bind('keypress', function (event) {
                // TODO: Get what new value would be
                var newValue = "...";
                return currencyRegEx.test(newValue);

            });
            $(element).bind('keyup', function (event) {
                var newValue = $(this).val();
                if (!currencyRegEx.test(newValue)) {                
                    // TODO: Revert to previous value
                }
            });
        }
    }
});

<input type="text" class="form-control" ng-model="item.paymentAmount" currency-input />

使用解决方案进行编辑这是我们当前的解决方案，以防止非数字输入和回滚无效的货币值。

首先，我们创建了一个新属性“scope.prevValue”来保存用户输入的最后一个有效值。然后，在“按键”时，我们检查以确保用户输入了数字、逗号或句点。最后，在“keyup”上，我们根据货币正则表达式检查新值，并在需要时回滚。

var currencyRegEx = /^\$?\-?([1-9]{1}[0-9]{0,2}(\,\d{3})*(\.\d{0,2})?|[1-9]{1}\d{0,}(\.\d{0,2})?|0(\.\d{0,2})?|(\.\d{1,2}))$|^\-?\$?([1-9]{1}\d{0,2}(\,\d{3})*(\.\d{0,2})?|[1-9]{1}\d{0,}(\.\d{0,2})?|0(\.\d{0,2})?|(\.\d{1,2}))$|^\(\$?([1-9]{1}\d{0,2}(\,\d{3})*(\.\d{0,2})?|[1-9]{1}\d{0,}(\.\d{0,2})?|0(\.\d{0,2})?|(\.\d{1,2}))\)$/;
var digitRegex = /^[0-9]*$/;
app.directive("currencyInput", function () {
    return {
        restrict: "A",
        scope: {},
        require: 'ngModel',
        link: function (scope, element, attrs, ngModelCtrl) {
            scope.prevValue = '';

            $(element).on('keypress', function(event) {
                var validAlphaChars = ['.', ','];
                var enteredCharacter = String.fromCharCode(event.charCode != null ? event.charCode : event.keyCode);
                if (validAlphaChars.indexOf(enteredCharacter) < 0 && !digitRegex.test(enteredCharacter)) {
                    return false;
                }
            });

            $(element).on('keyup', function (event) {
                var newValue = $(element).val();
                if (newValue.length > 0 && !currencyRegEx.test(newValue)) {
                    $(element).val(scope.prevValue);
                    return false;
                } else {
                    scope.prevValue = $(element).val();
                }
            });
        }
    });

使用解决方案 #2 进行编辑(使用 Steve_at_IDV 接受的答案的方法)

var currencyRegEx = /^\$?\-?([1-9]{1}[0-9]{0,2}(\,\d{3})*(\.\d{0,2})?|[1-9]{1}\d{0,}(\.\d{0,2})?|0(\.\d{0,2})?|(\.\d{1,2}))$|^\-?\$?([1-9]{1}\d{0,2}(\,\d{3})*(\.\d{0,2})?|[1-9]{1}\d{0,}(\.\d{0,2})?|0(\.\d{0,2})?|(\.\d{1,2}))$|^\(\$?([1-9]{1}\d{0,2}(\,\d{3})*(\.\d{0,2})?|[1-9]{1}\d{0,}(\.\d{0,2})?|0(\.\d{0,2})?|(\.\d{1,2}))\)$/;
app.directive("currencyInput", function () {
    return {
        restrict: "A",
        scope: {},
        require: 'ngModel',
        link: function (scope, element, attrs, ngModelCtrl) {
            ngModelCtrl.$parsers.push(function (value) {
                if (value.length > 0 && value != '.' && !currencyRegEx.test(value)) {
                    var prevValue = ngModelCtrl.$modelValue;
                    ngModelCtrl.$setViewValue(prevValue)
                    ngModelCtrl.$render();
                    return prevValue;
                }

                return value;
            });
        }
    }
});

Answer 1

现在是使用 ngModelCtrl.$parsers 而不是手动绑定(bind)按键的好时机。在链接函数中尝试这样的操作:

ngModelCtrl.$parsers.push( function (value) {
    // do some validation logic...it fails
    if (validationFails) {
        var prevValue = ctrl.$modelValue;
        ctrl.$setViewValue(prevValue); // set view
        ctrl.$render(); // render view
        return prevValue; // set model
    }

    // otherwise we're good!
    return value;
} );

这是一个Plunker这表明。输入字段将拒绝输入小写 z。

请参阅 https://docs.angularjs.org/api/ng/type/ngModel.NgModelController 的 $parsers 部分了解更多信息。