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

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>

也许，您可以使用 ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" 来验证 2 位小数。但是，使用如此大的数字会遇到问题，因为 javascript 数字是由 64 位定义的，因此随着数字的增长，您会失去精度，并且很难将输入值视为其自身的数字；例如：9999999999999999 被评估为 10000000000000000。

以下示例使用 ng-pattern 来验证小数位，但是，它并不能防止 javascript Number 掉坑。

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>