在 UI 上使用 ng-currency 进行输入验证

Question

我正在使用 ng-currency 指令（找到 here）来完成项目的一些输入验证，并希望对源代码进行一些更改。

目前，虽然该指令接受用户的任何形式的输入，但它只对数据模型进行所有过滤。例如。即使输入字段中有“ABC”，模型值保持不变，因为它不是真正的货币输入，但视图采用所有字母数字字符和符号。这几乎是完美的，但只完成了我的工作的一半，因为 我想阻止在实际输入 UI 上键入任何非法字符（其中非法字符是 0-9 位以外的任何字符，句点 ('. ') 和破折号 ('-'))。 Demo of directive here

我已经制作了一个正则表达式，我相信它可以处理我需要的情况（可选的“-”符号仅在输入的开头，只能出现一次以表示负货币值；并且限制为 0-2 个小数点在可选的 '.' 之后，它也只能出现一次）

[-]?[\d]+[.]?[\d]{0,2}

现在我的问题是我对 Angular 和 JS 还很陌生，所以我不确定在我正在使用的指令中将这个正则表达式放在哪里，更不用说如何实现这个期望的结果了。我还想在此指令中将maxlength 属性设置为 11 个字符，但同样，对于最近才了解 ng-repeat 和其他角度模式的初学者来说，在此指令中导航是非常困难的。我有一种预感，我会添加一个 element.on('keypress') 函数来测试正则表达式模式，但这只是一种预感，我想在尝试花更多时间解决这个问题之前咨询有经验的人。

非常感谢您的任何帮助，感谢您的关注。

Answer 1

您应该使用指令来限制 keydown 上的字符。

Based on this directive你可以自定义为：

angular.module('app').directive('restrictTo', function() {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
        var re = RegExp(attrs.restrictTo);
        var exclude = /Backspace|Enter|Tab|Delete|Del|ArrowUp|Up|ArrowDown|Down|ArrowLeft|Left|ArrowRight|Right/;

        element[0].addEventListener('keydown', function(event) {
            var v=element[0].value + event.key;
            if (!exclude.test(event.key) && !re.test(v)) {
                event.preventDefault();
            }
        });
    }
  }
});

这是你的输入

<input type="text" ng-model="value" ng-currency restrict-to="[-0-9.]$">

你可以看演示here

编辑：感谢Bang 提供新的正则表达式。比原版好多了。

编辑：改用它 restrict-to="[-0-9.]$" 因为目标是限制到 0 - 9 和 . (和 - 也许；不确定那是一种有效的货币）