ng-pattern允许拖尾句点

Question

我正在尝试创建一个带有angularjs的HTML数字输入，它只允许整数，不允许小数。它适用于具有小数部分的数字，例如"3.5"，但不适用于只有一个尾随小数但后面没有数字的数字，例如“3”。

我使用的模式是"/^\d+$/"，即

<input type="number" ng-model="price" name="price_field" ng-pattern="onlyNumbers" required>

在控制器中

$scope.onlyNumbers = /^\d+$/;

如果我输入"3.“则不会出现验证消息。我想应该是这样。

JS Fiddle：

​

function formCtrl($scope){
    $scope.onSubmit = function(){
        alert("form submitted");
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="formCtrl">
<form name="myForm" ng-submit="onSubmit()">
    <input type="number" ng-model="price" name="price_field" ng-pattern="/^\d+$/" required>
    <span ng-show="myForm.price_field.$error.pattern">Not a valid number!</span>
    <input type="submit" value="submit"/>
</form>
</div>

​

Answer 1

问题出在type="number"上。

在HTML中，当为type="number"时，3.是有效值。所以，我相信type="number"比ng-pattern regex更受欢迎。

将类型更改为text

<input type="text" ng-model="price" name="price_field" ng-pattern="/^\d+$/" required>

Fiddle

Answer 2

如果需要禁止非数字输入，只需添加一个onkeypress="return (event.charCode == 8 || event.charCode == 0) ? null : event.charCode >= 48 && event.charCode <= 57"

​

function formCtrl($scope){
    $scope.onSubmit = function(){
        alert("form submitted");
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="formCtrl">
<form name="myForm" ng-submit="onSubmit()">
    <input type="text" ng-model="price" name="price_field" onkeypress="return (event.charCode == 8 || event.charCode == 0) ? null : event.charCode >= 48 && event.charCode <= 57" ng-pattern="/^\d+$/" required> 
    <span ng-show="myForm.price_field.$error.pattern">Not a valid number!</span>
    <input type="submit" value="submit"/>
</form>
</div>

​