邮政编码的可选 UI 掩码以接受 5 或 9 位数字

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>