Javascript 如何使角面具工作与各种信用卡？

我在信用卡字段上使用AngularUI Mask（）

但是，根据Stripe（）的说法，并不是所有的卡片都有16位数字。如何允许用户输入14到16位数字，并自动将其格式化为：

• xxxx-xxxxxx-xxxxx代表美国运通
• xxxx xxxx xxxx xx餐车俱乐部
• xxxx xxxx xxxx xxxx其他一切

Plnkr：

---

最简单的方法是在控制器范围内使用一个变量作为掩码值。观察cc编号的值，并根据卡的类型动态更改掩码。为此，您必须通过

ui选项

禁用

ui掩码

上的验证。然后，

$scope.$watch（）

卡号更改时的值

使用基本正则表达式匹配（由于gist by）来确定卡的类型。对于更健壮的方法，您可以使用更深入的库，如

然后，更改掩码变量以适应特定卡类型的要求

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" />

例如：

---

CC中的前几个数字告诉您它是什么类型的卡（例如，VISA卡都以

4

开头）。这将告诉你需要做些什么来格式化它。你真的想要拥有美国运通或迪纳俱乐部的客户吗？；）@MarcB-好的，谢谢，我如何使用控制器中的面具？@JonathanM-不幸的是，我必须；）我怀疑您是否可以使用ui掩码，因为输入可能有3个版本。你最多只能说“仅限数字和空格”，然后重新格式化为合适的样式。非常感谢。这很有帮助。就像一个符咒一样工作。@ndmweb当你试图将信用卡粘贴到输入中时，这是非常失败的。有解决办法吗？

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