javascript - 自定义指令限制用户输入特殊字符 : angular Js

Question

我正在详细学习 angularJs 指令。目前我正在使用它来限制用户不能输入特殊字符。

这是代码

HTML

<input type="text" no-special-char ng-model="vm.customTag" class="form-control" value="" />

AngularJS 指令

app.directive('noSpecialChar', function () {
    return {
        require: 'ngModel',
        restrict: 'A',
        link: function (scope, element, attrs, modelCtrl) {
            modelCtrl.$parsers.push(function (inputValue) {
                if (inputValue == null)
                    return ''
                cleanInputValue = inputValue.replace(/[^\w\s]/gi, '');
                if (cleanInputValue != inputValue) {
                    modelCtrl.$setViewValue(cleanInputValue);
                    modelCtrl.$render();
                }
                return cleanInputValue;
            });
        }
    }
});

这里有两个我想要的东西

(1) 用户可以输入减号/破折号 '-' 现在不会发生，我该如何更改我的 /[^\w\s]/gi 也允许用户输入 -(破折号/减号)。

(2) 上面的功能只是限制用户不能输入任何特殊字符，但是当用户输入特殊字符时我也想显示一个红色警告“不允许输入特殊字符” ，我该怎么做？？

感谢任何帮助!!!

谢谢

Answer 1

问题#1

目前，您的 RegEx 正在选择所有不是 ([^) 单词字符 (\w) 或空格 (\s) 的字符>).要包含 -，它需要包含在不被替换的字符列表中。

尝试以下正则表达式:

/[^\w\s-]/gi

要排除任何其他字符被删除，只需将它们添加到 -

之后

Live Demo on RegExr

---

问题#2

您需要监听表单上的 keypress 事件，以查看每次内容更改。然后您可以使用 .match() 查看是否存在任何特殊字符。如果是，它将返回一个 truthy 的字符串，否则将返回 false。

您可以在 if 语句中检查 .match() 的结果，如果匹配到特殊字符，则添加您的消息。

if (inputValue.match(/[^\w\s]/gi)) {
    // Add Alert Here!
}

或者，在您的 if (cleanInputValue != inputValue) 中，您可以添加代码来创建警报。您的 if 语句基本上会为您提供与 .match() 方法相同的结果。它检测字符串是否已被 .replace() 更改，如果有则运行内部代码