customizing指令限制用戶輸入特殊字符：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 ）的字符。 要包含- ，它需要包含在不被替換的字符列表中。

嘗試以下RegEx：

/[^\w\s-]/gi

要排除任何其他字符被刪除，只需在-之后添加它們-

在RegExr上現場演示

問題2

您需要在表單上偵聽keypress事件，以便每次更改內容時查看。 然后，您可以使用.match()查看是否存在任何特殊字符。 如果他們這樣做，它將返回一個truthy的字符串，如果不是，它將返回false 。

您可以在if語句中檢查.match()結果，如果匹配了特殊字符，請添加您的消息。

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

或者，在if (cleanInputValue != inputValue) ，您可以添加代碼來創建警報。 你的if語句基本上給你與.match()方法相同的結果。 它檢測字符串是否已被.replace()更改，並在內部運行代碼（如果有）

Answer 2

進一步編輯評論：

這就是你所描述的，而不是以特別“角度”的方式 - 而是實現你所描述的期望結果。

<!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 個解決方案

解決方案1
0 2016-03-30 09:17:36

解決方案2
0 2016-03-30 09:44:41

customizing指令限制用戶輸入特殊字符：angular Js

問題描述

2 個解決方案

解決方案1 0 2016-03-30 09:17:36

解決方案2 0 2016-03-30 09:44:41

解決方案1
0 2016-03-30 09:17:36

解決方案2
0 2016-03-30 09:44:41