Question

用户在此输入用户名，用户名只是数字

<fieldset class="col-sm-12 col-xs-12 text-center">
            <label for="username">Username</label>
            <input type="text" id="username" ng-pattern="/^[0-9]*$/"
                   class="text-warning"
                   ng-class="{'text-left': form.userName.$valid}"
                   autocomplete="off"                  
                   ng-model="self.user.userName"
                   name="userName"
                   ng-required="true"
                   ng-blur="self.user.usernamePlaceholder = false"
                   ng-focus="self.user.usernamePlaceholder = true"
                   maxlength="20"
                   onfocus="if (this.hasAttribute('readonly')) { this.removeAttribute('readonly');this.blur(); this.focus() }" />
        </fieldset>

但ng-pattern dosent工作

我可以输入任何内容

Answer 1

当我们实际使用ng-pattern时，我们为该输入设置了输入验证。

例如：

<input type="text" ng-pattern="/^[0-9]*$/" ng-model="test" />
{{test}}

此输入已由ng-pattern验证，表示我想要的时间键入 test123 返回为空给我，当输入 123 时返回 123 ，因此您的代码很好。

但你想要的不是模式它的指令，我写自定义指令ngInteger：

＆＃13;

var app = angular.module("app", [])

app.directive('ngInteger', function(){
   return {
     require: 'ngModel',
     link: function(scope, element, attrs, modelCtrl) {
       modelCtrl.$parsers.push(function (inputValue) {
           // this next if is necessary for when using ng-required on your input. 
           // In such cases, when a letter is typed first, this parser will be called
           // again, and the 2nd time, the value will be undefined
           if (inputValue == undefined) return '' 
           var transformedInput = inputValue.replace(/[^0-9]/g, ''); 
           if (transformedInput!=inputValue) {
              modelCtrl.$setViewValue(transformedInput);
              modelCtrl.$render();
           }         

           return transformedInput;         
       });
     }
   };
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">

<form name="form">
  <h3>ng-pattern</h3>
  <input type="text" name="pattern" ng-pattern="/^[0-9]*$/" ng-model="test1" /> {{test1}}
  <p>test 1 validation: {{form.pattern.$valid}}</p>
  <h3>ng-integer</h3>
  <input type="text" name="integer" ng-integer ng-model="test2" /> {{test2}}
  <p>test 2 validation: {{form.integer.$valid}}</p>
</form>
</div>

＆＃13;

Answer 2

如果您使用指令，则无需使用ng-pattern。它实际上在keypress本身做同样的事情。

valid-number here is directive mentioned below. Mention the `maxlength` if needed.

在HTML中：

<input type="text" valid-number maxlength="12" ng-model="test" />

在input代码

中使用此指令

var myApp = angular.module("myApp", []);
myApp.directive('validNumber', function() {
    return {
        require: '?ngModel',
        link: function(scope, element, attrs, ngModelCtrl) {
            if(!ngModelCtrl) {
                return; 
            }

            ngModelCtrl.$parsers.push(function(val) {
                if (angular.isUndefined(val)) {
                    var val = '';
                }
                var clean = val.replace( /[^0-9]+/g, '');
                if (val !== clean) {
                    ngModelCtrl.$setViewValue(clean);
                    ngModelCtrl.$render();
                }
                return clean;
            });

            element.bind('keypress', function(event) {
                if(event.keyCode === 32) {
                    event.preventDefault();
                }
            });
        }
    };
});

希望这会有所帮助..

Angular中的ng-Pattern

2 个答案: