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

Posted 2021-03-27

我在信用卡领域使用Angular UI Mask（qazxsw poi）。

https://github.com/angular-ui/ui-mask

但是，根据Stripe（<input type="text" placeholder="xxxx-xxxx-xxxx-xxxx" ui-mask="9999-9999-9999-9999" ng-model="card.number"> ）的说法，并非所有的卡都有16位数。如何允许用户输入14到16位数字并自动将其格式化为：

• 美国运通的xxxx-xxxxxx-xxxxx
• 适用于大莱卡的xxxx-xxxx-xxxx-xx
• 其他一切都是xxxx-xxxx-xxxx-xxxx

其他：赌场

答案

最简单的方法是在控制器范围内使用变量作为掩码值。观察cc编号的值，并根据卡的类型动态更改掩码。为此，您必须通过https://stripe.com/docs/testing禁用http://plnkr.co/edit/Qx9lv7t4jGDwtj8bvQSv?p=preview上的验证。然后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;
}

html将如下所示：

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