如何验证输入数字字段的小数点？

Question

具有带小数点的货币列表，并且具有两个输入字段 第一个是货币，第二个将是金额

基于货币选择金额的小数点应输入

例如 情况1：

用户选择美元货币金额应为2个小数点。

如果用户输入的数字超过2个小数点，则需要向用户显示错误消息

情况2： 用户选择AUD货币金额应为5个小数点。 如果用户输入的小数点超过5个，则需要向用户显示错误消息

基于货币的验证应该是动态的，我们需要检查小数点

这一次我们需要显示错误消息（查看金额字段，它有3个小数点）

 demo

default(int)

Answer 1

您可以使用Regex测试小数点。示例：

function checkDecimal(currency, amount) {
  switch (currency) {
    case "USD":
      var regexp = /^\d+(\.\d{1,2})?$/;
      return regexp.test(amount);
    case "AUD":
      var regexp = /^\d+(\.\d{1,5})?$/;
      return regexp.test(amount);
  }
}

正则表达式中的\d{1,2}定义应该有多少个数字（在这种情况下为1-2个数字）。

Answer 2

@realme尝试一下：

<div ng-controller="DemoCtrl" layout="column" ng-cloak="" class="md-inline-form inputdemoBasicUsage" ng-app="MyApp">
   <form name="service" novalidate ng-submit="save(service)">
  <md-input-container class="md-block" flex-gt-xs>
  <label>Currency</label>
  <md-select ng-model="service.Currency" required name="Currency" ng-change="formatPattern(service.Currency)">
     <md-option ng-repeat="currency in listofcurrency" value="{{currency.Currency}}">{{currency.Currency}}</md-option>
  </md-select>
  <div ng-messages="service.Currency.$error">
     <div ng-message="required">Currency is required.</div>
  </div>
  <md-input-container class="md-block" flex-gt-xs>
     <label>Amount</label>
     <input ng-model="service.amount" type="number" step="0.01" min="0.01" pattern="{{pattern}}" required name="Amount">
     <div ng-messages="service.Amount.$error">
        <div ng-message="required">Amount is required</div>
        <div ng-message="min">Amount must be greater than 0.</div>
        <div ng-message="pattern">Amount must be greater than 0.</div>
     </div>
  </md-input-container>
  <md-button class="md-raised" aria-label="Save" type="submit">
     Submit
  </md-button>
 </form>
</div>

angular
  .module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
  .controller('DemoCtrl', function($scope) {

  $scope.listofcurrency =
[
{
"Currency":"USD",
"DecimalDigit":2
},
{
"Currency":"AUD",
"DecimalDigit":5,
},
{
"Currency":"JPY",
"DecimalDigit":0,
}]

$scope.pattern = "";
$scope.formatPattern = function(currency) {
    for (var val of $scope.listofcurrency) {
        if (val.Currency === currency) {
            $scope.pattern = "^\d+(\.\d{1,"+(val.DecimalDigit)+"})?$"
            break;
        }
    }
}
})
.config(function($mdThemingProvider) {

// Configure a dark theme with primary foreground yellow

$mdThemingProvider.theme('docs-dark', 'default')
  .primaryPalette('yellow')
  .dark();

});