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

在AngularJS中执行快速POC，只允许特定的文本框输入

目标是在用户每次键入新字符时检查该值，如果正则表达式检查失败，则需要拒绝该字符或将其回滚到以前的值

在我看来，以下是我的两个选择： 1.绑定到keypress事件，检查针对正则表达式的新值，如果失败，则返回false，防止字符被接受到文本框中 2.绑定到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 />

---

首先，我认为你不应该修改用户的输入。从用户体验的角度来看，我个人觉得这很糟糕。例如，最好用红色边框表示输入处于错误状态

其次，有一个指令可以满足您的需要

一些类似的问题：

---

首先，我认为您不应该修改用户的输入。从用户体验的角度来看，我个人觉得这很糟糕。例如，最好用红色边框表示输入处于错误状态

其次，有一个指令可以满足您的需要

一些类似的问题：

---

这将是使用

ngModelCtrl.$parsers

而不是手动绑定到按键的好时机。在链接函数中尝试以下操作：

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;
} );

下面是一个例子。输入字段将拒绝输入小写的z

---

有关更多信息，请参阅的$parsers部分。

这将是使用

ngModelCtrl.$parsers

而不是手动绑定到按键的好时机。在链接函数中尝试以下操作：

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;
} );

下面是一个例子。输入字段将拒绝输入小写的z

---

有关更多信息，请参阅的$parsers部分。

谢谢您的回复。我尝试了一下，但当我返回false时，它不会恢复到旧值。啊，是的，很抱歉，$validators要修改表单输入的有效性，我将修改答案以使用$parsers。尝试一下这个新答案，看看是否有帮助。尝试一下，我能够保持正确的“prevValue”，但它仍然在UI中显示错误的值。我可以阻止此函数更新模型吗？随着我阅读更多文档，在返回prevValue之前，可能需要在validationFails块中调用ngModelCtrl.$setViewValue（prevValue）。我可能会设置一个plunkr来测试这个。谢谢你的回复。我尝试了一下，但当我返回false时，它不会恢复到旧值。啊，是的，很抱歉，$validators要修改表单输入的有效性，我将修改答案以使用$parsers。尝试一下这个新答案，看看是否有帮助。尝试一下，我能够保持正确的“prevValue”，但它仍然在UI中显示错误的值。我可以阻止此函数更新模型吗？随着我阅读更多文档，在返回prevValue之前，可能需要在validationFails块中调用ngModelCtrl.$setViewValue（prevValue）。我可能会设置一个plunkr来测试这个。谢谢你的回复。我尝试使用ng模式，但它似乎不是我需要的。我同意我们不应该修改用户输入，但这是我们项目的一项要求：（谢谢你的回复。我尝试使用ng模式，但它似乎不是我所需要的。我同意我们不应该修改用户输入，但这是我们项目的一项要求：（很高兴你找到了它。另一种只使用ngModel的技术（而不是直接使用jQuery）在下面。很高兴你找到了它。下面是另一种只使用ngModel（而不是直接使用jQuery）的技术。

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

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;
} );