Question

我在表单中有一个数字输入字段。我将最大小数位数设置为2，最大值设置为99999999999999

如果我尝试提交99999999999999999的值，则会检测到它太大并且不允许它。如果我尝试提交99.123，它会检测到它有太多小数位并且不允许它。

但如果我尝试提交99999999999996.123，则不会检测到它的小数位数太多。

我该如何解决这个问题？

var app = angular.module('Appp', []);

app.controller('metadataCtrl', function ($scope, $http) {
    $scope.vm = { myItems : {} }

    $scope.item = {type: "a", value: 99999999999998};
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form ng-app="Appp" name="myForm" ng-controller="metadataCtrl">

  <input type="number"
         step="0.01"
         max="99999999999999"
         min="0"
         step-message="{name} can only have a maximum of 2 decimal places"
         ng-model="item.value"/>

  <input type="submit" value="Submit">

 </form>

Answer 1

这不是小数位，您的输入99999999999996.123仍然低于99999999999999; max与小数位无关，但与自身的数字无关，如果要验证小数位，则应自行创建指令验证器。此外，step属性不限制小数位，但仅指定必须使用以指定速率递增的值，也就是说，它只接受步长倍数处的值。

参考：MDN web docs -<input>

也许，您可以使用验证2位小数的ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/"。但是，使用如此大的数字会出现问题，因为javascript数字由64位定义，因此数字增加会导致精度降低，因此难以将输入值视为自身数字;例如：9999999999999999评估为10000000000000000。

以下示例使用ng-pattern验证小数位，但是，它不会阻止javascript数字丢失。

var app = angular.module('Appp', []);

app.controller('metadataCtrl', function($scope, $http) {
  $scope.vm = {
    myItems: {}
  }

  $scope.item = {
    type: "a",
    value: 9999999999999.99
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form ng-app="Appp" name="myForm" ng-controller="metadataCtrl">

  <input type="number"
         step="0.01"
         max="99999999999999"
         min="0"
         name="myField"
          ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/"
         ng-model="item.value"/>

  <input type="submit" value="Submit">
  <br>
  {{ myForm.myField.$error }}
  <br>
  <span ng-if="myForm.myField.$error.pattern">myField can only have a maximum of 2 decimal places</span>
</form>

使用最大输入和最多2位小数验证数字输入不起作用

1 个答案: