Question

使用UI_mask，我希望将邮政编码接受为（xxxxx-xxxx或xxxxx）。

为了做到这一点，我使用了

< input type="text" name="zipcode" ui-mask="99999?-9999" ui-mask-placeholder ng-model="zipCode">

但是它接受8位或9位数并且占位符为（_____-____）。

有没有办法接受5位或9位数（使用ui-mask）？

Answer 1

只有angular-ui-mask无法接受5个或9个数字，但这可以在angular-ui-validate的帮助下完成。

掩码的angular-ui-mask和1到5位数之间的验证。

angular-ui-validate用于验证6到9位数。

请查看下面的工作剪辑。

var app = angular.module('myApp', ['ui.mask', 'ui.validate']);
app.controller('MainController', ['$scope', function ($scope) {
    $scope.formData = {'zip': ''};
    $scope.validateZip = function(zip) {
        // no zip code is valid. left this for 'required'.
        if(!zip) return true; 
        // true if 5 or 9 digits
        return zip.match(/^(\d{5}|\d{9})$/);
    }
}]);

angular.bootstrap(document.getElementById('myApp'), ['myApp']);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-mask/1.8.7/mask.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-validate/1.2.2/validate.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css">

<div id="myApp" class="container">
  <form name="myForm">
    <div class="form-group" ng-controller="MainController" ng-class="{'has-error': myForm.zipcode.$error.mask || myForm.zipcode.$error.validator}">
      <label for="zipcode">Zip code:</label>
      <input type="text" ng-model="formData.zip" ui-mask="99999?-?9?9?9?9" ui-validate="'validateZip($value)'" class="form-control" id="zipcode" name="zipcode">
      <span class="help-block" ng-if="myForm.zipcode.$error.mask" >Invalidated by ui-mask</span>
      <span class="help-block" ng-if="myForm.zipcode.$error.validator">Invalidated by ui-validator</span>
    </div>
  </form>
</div>

可选的UI-Masking，用于接受5或9位数的邮政编码

1 个答案: