Question

我正在尝试验证文本框只允许整数和大于零的值。

我附上了我的代码。

HTML：

<body ng-app="myApp">
  NUMBER ONLY <input type="text" allow-pattern="\d" />

</body>

JS：

var app = angular.module("myApp",[]);

app.directive('allowPattern', [allowPatternDirective]);

function allowPatternDirective() {
    return {
        restrict: "A",
        compile: function(tElement, tAttrs) {
            return function(scope, element, attrs) {
                element.bind("keypress", function(event) {
                    var keyCode = event.which || event.keyCode; // I safely get the 
                    if (!keyCodeChar.match(new RegExp(attrs.allowPattern, "i"))) {
            event.preventDefault();
                        return false;
                    }          
                });
            };
        }
    };
}

我也试过这样的声音：

<body ng-app="myApp">
  NUMBER ONLY <input type="text" allow-pattern="^[1-9][0-9]*$" />

</body>

但它不起作用。

检查jsfiddle链接：click here

Answer 1

您可以使用angular form validation并使用ng-model-options

以下是Codepen

的链接

Controller snippet：

var app = angular.module('app',[]);
app.controller('myCtrl',function($scope){
 $scope.onlyNumbers = /^[1-9]+[0-9]*$/;
})

查看：

<div ng-app="app">
<br />
<br />
<div class="col-md-2" ng-controller="myCtrl">
  <form name="myForm1">
  <div class="form-group" ng-class="{'has-error':myForm1.number1.$invalid}">
    <label for="">Following validation happens as the user entrs a value.</label>
    <input class="form-control" ng-pattern="onlyNumbers" ng-model="value1" name="number1"/> Valid? {{myForm1.number1.$valid}}
  </div>
</form>
<form name="myForm2">
  <div class="form-group" ng-class="{'has-error':myForm2.number2.$invalid}">
    <label for="">Following validation happens after blur </label>
    <input class="form-control" ng-pattern="onlyNumbers" ng-model="value2" name="number2" ng-model-options="{ updateOn: 'blur'}"/> Valid? {{myForm2.number2.$valid}}
  </div>
</form>

有关如何通过控制器更好地完成此过程的更多信息，请参阅this link

AngularJs输入文本框仅允许大于零的值

1 个答案: