Question

我在信用卡领域使用AngularUI Mask（https://github.com/angular-ui/ui-mask）。

<input type="text" placeholder="xxxx-xxxx-xxxx-xxxx" ui-mask="9999-9999-9999-9999" ng-model="card.number">

但是，根据条纹（https://stripe.com/docs/testing），并非所有卡都有16位数。如何允许用户输入14到16位数字并自动将其格式化为：

xxxx-xxxxxx-xxxxx for American Express
xxxx-xxxx-xxxx-xx for Diners Club
xxxx-xxxx-xxxx-xxxx用于其他一切

Plnkr： http://plnkr.co/edit/Qx9lv7t4jGDwtj8bvQSv?p=preview

Answer 1

最简单的方法是在控制器范围内使用变量作为掩码值。观察cc编号的值，并根据卡的类型动态更改掩码。为此，您必须通过ui-mask禁用ui-options上的验证。然后$scope.$watch()更改卡号的值。

使用基本的正则表达式匹配（感谢@stefano-bortolotti的要点）来确定卡的类型。要获得更强大的方法，您可以使用更深入的库，例如credit-card-type

function getCreditCardType(creditCardNumber) { 
  // start without knowing the credit card type
  var result = "unknown";

  // first check for MasterCard
  if (/^5[1-5]/.test(creditCardNumber)) {
    result = "mastercard";
  } 
  // then check for Visa
  else if (/^4/.test(creditCardNumber)) {
    result = "visa";
  }
  // then check for AmEx
  else if (/^3[47]/.test(creditCardNumber)) {
    result = "amex";
  } 
  // then check for Diners
  else if (/3(?:0[0-5]|[68][0-9])[0-9]{11}/.test(creditCardNumber)) { 
    result = "diners"
  }
  // then check for Discover
  else if (/6(?:011|5[0-9]{2})[0-9]{12}/.test(creditCardNumber)) {
    result = "discover";
  } 

  return result;
}

然后，更改掩码变量以满足特定卡类型的要求。

function getMaskType(cardType){
  var masks = {
    'mastercard': '9999 9999 9999 9999',
    'visa': '9999 9999 9999 9999',
    'amex': '9999 999999 99999',
    'diners': '9999 9999 9999 99',
    'discover': '9999 9999 9999 9999',
    'unknown': '9999 9999 9999 9999'
  };
  return masks[cardType];
}

将所有内容放在控制器中。

myApp.controller("myCtrl", function($scope) {
  $scope.cc = {number:'', type:'', mask:''};
  $scope.maskOptions = {
    allowInvalidValue:true //allows us to watch the value
  };
  $scope.$watch('cc.number', function(newNumber){
    $scope.cc.type = getCreditCardType(newNumber);
    $scope.cc.mask = getMaskType($scope.cc.type);
  });
});

HTML将如下所示：

<input ng-model="cc.number" ui-mask="{{cc.mask}}" ui-options="maskOptions" />

实施例： https://jsfiddle.net/gq42wbL5/18/

如何使用各种信用卡制作角度面罩？

1 个答案: