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）上述功能仅限制用户不输入任何特殊字符，但当用户键入特殊字符时，我想显示红色警告以及＆＃34;不允许使用特殊字符＆＃34 ; ，我该怎么做？

任何帮助表示赞赏!!!

由于

Answer 1

问题＃1

目前，您的RegEx正在选择所有不是（[^）单词字符（\w）或空格（\s）的字符。要包含-，需要将其包含在要替换的字符列表中。

尝试以下RegEx：

/[^\w\s-]/gi

要排除其他任何字符，请在-

之后添加

Live Demo on RegExr

问题＃2

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

您可以在.match()语句中查看if的结果，如果匹配了特殊字符，请添加您的信息。

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

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

则运行内部代码

Answer 2

进一步修改评论：

这就是你所描述的，而不是特别的＆＃34; Angular＆＃34;方式 - 但达到你所描述的预期结果。

<!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>

customizing指令限制用户输入特殊字符：angular Js

2 个答案: