AngularJS - 阻止用户输入无效输入答案

【问题标题】：AngularJS - stop user from typing invalid inputAngularJS - 阻止用户输入无效输入
【发布时间】：2015-03-10 22:31:30
【问题描述】：

我有一个输入文本框，我想将输入限制为仅限字母数字（0-9、a-z、A-Z），最大长度为 15。

我正在尝试在 angularjs 中实现这一点。

<input type="text" id="trackNumber" maxlength="15" ng-pattern="/^[a-zA-Z0-9]*$/" placeholder="" class="form-control" ng-model="trackNumber"/>

“maxlength”设置为 15，用户无法在框中键入第 16 个字符。

同样，当用户键入任何特殊字符或空格时，我想防止“按键”事件。目前，ng-pattern 似乎并没有阻止用户输入无效的输入。

如何做到这一点？

非常感谢任何帮助。

【问题讨论】：

据我所知，这不是ng-pattern 的预期行为。作为一个建议，我也不认为从用户的角度来看这是预期的行为，所以这可能会让他们感到沮丧或惊讶。例如，当用户将无效值粘贴到字段中时会发生什么？
谢谢。我们同意在表单验证中使用 ng-pattern 行为。

标签： angularjs

【解决方案1】：

@Shawn Bush 是正确的，这不是 ng-pattern 的默认行为。

不过请看我的plunk 我创建了一个名为“regExInput”的指令，它接受一个必需的属性“regEx”，如果根据正则表达式，条目无效，则针对每个返回 false 的击键进行检查。

指令代码：

app.directive("regExInput", function(){
"use strict";
return {
    restrict: "A",
    require: "?regEx",
    scope: {},
    replace: false,
    link: function(scope, element, attrs, ctrl){
      element.bind('keypress', function (event) {
        var regex = new RegExp(attrs.regEx);
        var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
        if (!regex.test(key)) {
           event.preventDefault();
           return false;
        }
      });
    }
};
});

我希望这会有所帮助。不要犹豫，要求对代码进行任何改进:)

我还从 Dale 的答案中借用了 jQuery 代码 here

【讨论】：

感谢您的指示。我们同意在表单验证中使用 ng-pattern 行为。
这确实有效，您可以使用 ng-pattern 属性值作为指令链接中的正则表达式输入。