Question

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

目前，虽然该指令采用来自用户的任何形式的输入，但它仅对数据模型进行所有过滤。例如。即使输入字段有＆＃34; ABC＆＃34;在其中，模型值保持不变，因为它不是真正的货币输入，但视图采用所有字母数字字符和符号。这几乎是完美的但只占我案例的一半，因为我想阻止任何非法字符被键入实际输入UI（非法字符不是0-9位数，一段时间（＆＃） 39;。＆＃39;）和短划线（＆＃39; - ＆＃39;））。 Demo of directive here

我制作了一个正则表达式，我认为它可以处理我需要的案例（仅在输入的开头只有一个可选的＆＃39; - ＆＃39;符号，只能出现一次表示负货币值;并且在可选＆＃39;。＆＃39;之后限制为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 =＆＃34; [ - 0-9。] $＆＃34; ，因为目标是限制为 0 - 9并且。（并且 - 也许;不确定这是一种有效的货币）

在UI

1 个答案: