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

Question

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

基于货币select应输入离子量小数点

例如案例 1：

user select 美元货币金额应为小数点后两位。

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

案例2： user select AUD 货币金额应为小数点后 5 位。如果用户输入超过 5 个小数点需要向用户显示错误消息

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

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

demo

<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" >
         <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" 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>
      </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,
}]
  })
  .config(function($mdThemingProvider) {

    // Configure a dark theme with primary foreground yellow

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

  });

Answer 1

您可以使用正则表达式来测试小数点。示例：

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();

});

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

How can i validate decimal point for input number field?

javascript

angularjs

angularjs-directive

angular-material