Restrict Special Characters in HTML & AngularJs

后端未结

关注

 3  1411

 ` ~ ! @ # $ % ^ & * ( ) _ + = { } | [ ] \\ : \' ; \" < > ? , . /

I want to restrict the above mentioned special characters and numbers i

相关标签:

3条回答

青春惊慌失措

2021-01-14 05:38

Use Directives to restrict Special characters: 

 angular.module('scPatternExample', [])
      .controller('scController', ['$scope', function($scope) {
      }])
    .directive('restrictSpecialCharactersDirective', function() {
         function link(scope, elem, attrs, ngModel) {
              ngModel.$parsers.push(function(viewValue) {
                var reg = /^[a-zA-Z0-9]*$/;
                if (viewValue.match(reg)) {
                  return viewValue;
                }
                var transformedValue = ngModel.$modelValue;
                ngModel.$setViewValue(transformedValue);
                ngModel.$render();
                return transformedValue;
              });
          }

          return {
              restrict: 'A',
              require: 'ngModel',
              link: link
          };      
      });

In Html:    
    <input type="text" ng-model="coupon.code" restrict-Special-Characters-Directive>

0 讨论(0)

被撕碎了的回忆

2021-01-14 05:48

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="myCtrl">

  <input type="text"  ng-change="Check(myValue)" ng-model="myValue" />
  <p ng-show="test">The Special Character not accept.</p>
</div>

<script>
  angular.module('myApp', [])
    .controller('myCtrl', ['$scope', function($scope,ngModel) {


      $scope.Check= function(x) {
        var reg = /^[^`~!@#$%\^&*()_+={}|[\]\\:';"<>?,./]*$/;

              if (!x.match(reg)) {
              $scope.myValue = x.substring(0, x.length-1);
              $scope.test=true;

              }
              else
              {
               $scope.test=false;
              }
      };
    }]);
</script>
</body>
</html>

0 讨论(0)

情深已故

2021-01-14 05:56

Updates:

I think $parsers is the best options here. See the updated code and plunker.

Controller

angular.module('ngPatternExample', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.regex = /^[^`~!@#$%\^&*()_+={}|[\]\\:';"<>?,./1-9]*$/;
  }])
  .directive('myDirective', function() {
     function link(scope, elem, attrs, ngModel) {
          ngModel.$parsers.push(function(viewValue) {
            var reg = /^[^`~!@#$%\^&*()_+={}|[\]\\:';"<>?,./1-9]*$/;
            // if view values matches regexp, update model value
            if (viewValue.match(reg)) {
              return viewValue;
            }
            // keep the model value as it is
            var transformedValue = ngModel.$modelValue;
            ngModel.$setViewValue(transformedValue);
            ngModel.$render();
            return transformedValue;
          });
      }

      return {
          restrict: 'A',
          require: 'ngModel',
          link: link
      };      
  });

Template

<input type="text" ng-model="model" id="input" name="input" my-directive />

Here's a updated example on Plunker

https://plnkr.co/edit/eEOJLi?p=preview

Old Answers:

Since you already have a list of characters that you want to restrict, you can spell them out in the ng-pattern expression like:

Controller

angular.module('ngPatternExample', [])
  .controller('ExampleController', ['$scope', function($scope) {
      $scope.regex = /^[^`~!@#$%\^&*()_+={}|[\]\\:';"<>?,./1-9]*$/;
  }]);

Template

<input type="text" ng-model="model" id="input" name="input" ng-pattern="regex" />

Here's a working example on Plunker

https://plnkr.co/edit/eEOJLi?p=preview

0 讨论(0)