特殊文字を入力するようにユーザーを制限するためのディレクティブをカスタマイズする：angular Js

私はangularJsディレクティブについて詳しく学んでいます。現在、私はそれを使用して特殊文字を入力しないように制限しています。ここ特殊文字を入力するようにユーザーを制限するためのディレクティブをカスタマイズする：angular Js

は、ここでは、コード

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）上記の機能は、ユーザーが任意の特殊文字を入力しないように制限しますが、ユーザーのタイプは特殊文字私も赤色の警告を表示したいとき私はどのように、できる「特殊文字は使用できません」それを行う？？

ご迷惑をおかけして申し訳ございません！

おかげ

出典

2016-03-30 shreyansh

ただし、置き換えコードでは、すべての特殊文字を削除する必要があります。特殊文字に含まれる文字について説明します。 –

〜！@＃$％^＆*（）{} []？/ + =、* '、アルファベット+マイナス（ - ）+ _（アンダースコア）の記号で入力する必要があります – shreyansh

角形のバリデーションを見てください。入力を無効としてマークし、フォームの検証でエラーを表示させることをお勧めします。また、ユーザーが入力した内容を変更することはお勧めしませんが、魔法のように変更するのではなく、何か間違ったことをしていることを伝える方が良いです。 –

質問＃現在、あなたの正規表現ではないすべての文字を選択している1

（[^）単語文字（\w）または空白（\s）。 -を含めるには、置き換えない文字のリストに含める必要があります。

次正規表現試してみてください：ちょうど質問＃2-

Live Demo on RegExr

後にそれらを追加、削除されることから、他の文字を除外するには

/[^\w\s-]/gi

を

コンテンツが変更されるたびに、フォームのkeypressイベントをリッスンする必要があります。 .match()を使用して、特殊文字が存在するかどうかを確認できます。もしそうであれば、truthyの文字列を返します。そうでなければ、falseを返します。

if文で.match()の結果を確認し、特殊文字が一致する場合はメッセージを追加できます。

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

if (cleanInputValue != inputValue)の代わりに、コードを追加してアラートを作成することもできます。 ifステートメントは、基本的に.match()メソッドと同じ結果をもたらします。これは、文字列が.replace()によって変更されたかどうかを検出し、それが

出典

2016-03-30 09:17:36 Druzion

それは私が探しているものです質問2、どのように私は100のテキストボックスを持っていても、入力ボックスに属性としてディレクティブの名前を付けることによってそれを再利用することができるように、ディレクティブ内に警告（ブートストラップアラート）を追加することができます – shreyansh

@shreyansh Mmmm ....私は恐れていることをどうやって行うのか分からない。 – Druzion

編集を持っている場合は、コメントにはさらに内部のコードを実行します：

これはあなたがいない、特に「角度」のように、記述何が - しかし、あなたの記述した望ましい結果を達成します。

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

出典

2016-03-30 09:44:41 Nathan

あなたの答えに感謝しますが、私は別の2つの場所で私のアプリケーションで100のテキストボックスを持っていると考えているので、ng-patternを使いたいとは思わない、もう一度このテキストをhtmlのものに加える必要があります。探しているのは、指示の中に実装されている赤いアラートボックスにエラーが表示されるようにすることです – shreyansh

このディレクティブの名前を属性としてn個のテキストボックスに追加できるカスタムディレクティブがあります。 – shreyansh

@shreyanshが更新されました - それがあなたの後にあるかどうかを教えてください。 – Nathan

特殊文字を入力するようにユーザーを制限するためのディレクティブをカスタマイズする：angular Js

答えて

関連する問題