自定义指令以限制用户输入特殊字符：angular Js答案

【问题标题】：customizing directive to restrict the user to input special characters: angular Js自定义指令以限制用户输入特殊字符：angular Js
【发布时间】：2016-07-18 03:31:57
【问题描述】：

我正在详细学习 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) 上面的功能只限制用户不能输入任何特殊字符，但是当用户输入特殊字符时我也想显示红色警告“不允许输入特殊字符” ，我该怎么做？？

感谢任何帮助!!!

谢谢

【问题讨论】：

但替换代码应该删除所有特殊字符。解释特殊字符下的字符。
我不想让用户输入~!@#$%^&*(){}[]?/+=,*`，应该是字母数字+减号(-)+ _（下划线）符号允许
查看角度表单验证。我建议将输入标记为无效并让表单验证处理显示错误。此外，我不建议更改用户输入的内容，最好告诉他们他们做错了什么，而不是神奇地改变他们所做的事情。
1) /[^\w\s-]/gi。 2）使用额外的检查，如if (/[^\w\s-]/.test(inputValue)) { /* Show the error in some control */ }。

标签： javascript angularjs regex angularjs-directive special-characters

【解决方案1】：

进一步编辑为 cmets：

这会按照您的描述进行，而不是以特别“Angular”的方式 - 但可以达到您描述的期望结果。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="ns.test">
<head>
    <title>Test</title>
    <!-- http://stackoverflow.com/questions/36303590/customizing-directive-to-restrict-the-user-to-input-special-characters-angular -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>

    <style>
        .input {
            padding: 20px;
            margin: 50px;
        }

            .input input {
                border: solid 1px black;
                font-family: Tahoma;
                font-size: larger;
                padding: 5px;
            }

        .err {
            color: red;
            padding: 5px;
            margin: 10px;
            font-family: Tahoma;
            font-size: larger;
            display:inline;
        }
    </style>

    <script type="text/javascript">

        var app = angular.module('ns.test', []);

        app.controller('testController', function ($scope) {
            $scope.item = 'item1';
            $scope.item2 = 'item2';
            $scope.item3 = 'item3';
            $('input:first').focus();
        });

        var noSpecialChar = function () {
            return {
                restrict: 'A',
                require: '?ngModel',
                link: function (scope, elm, attr, modelCtrl) {
                    if (!modelCtrl) return;

                    modelCtrl.$parsers.push(function (inputValue) {
                        if (inputValue == null)
                            return ''

                        var parent = $(elm).parent();

                        cleanInputValue = inputValue.replace(/[^a-z0-9-_]+/gi, '');
                        if (cleanInputValue != inputValue) {
                            if (parent.find(".err").length == 0)
                                parent.append("<div class=\"err\">Invalid Characters</div>"); // change the class here to your bootstrap alert classes
                        } else
                            parent.find(".err").remove();

                        return cleanInputValue;
                    });
                }
            };
        };

        app.directive('noSpecialChar', noSpecialChar);

    </script>
</head>
<body data-ng-controller="testController">
    <form name="userForm" novalidate>
        <div class="input">
            <input type="text" data-no-special-char data-ng-model="item" />
        </div>
        <div class="input">
            <input type="text" data-no-special-char data-ng-model="item2" />
        </div>
        <div class="input">
            <input type="text" data-no-special-char data-ng-model="item3" />
        </div>
    </form>
</body>
</html>

【讨论】：

感谢您的回答，但我不想使用 ng-pattern，因为考虑到我的应用程序中有 100 个文本框位于不同的 2 个位置，我必须再次将此 html 内容添加到文本框中我不想要，我正在寻找的是我想要红色警报框显示错误，这是在指令内实现的
我正在寻找一个自定义指令，通过它我可以将此指令名称作为属性添加到 n 个文本框。
@shreyansh 已更新 - 如果您要这样做，请告诉我。

【解决方案2】：

问题 #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() 更改，如果有则运行其中的代码

【讨论】：

这就是我要找的问题 2，如何在指令中添加警报（引导警报），这样即使我有 100 个文本框，我也可以通过附加指令名称来重复使用它作为输入框的属性