Как заставить угловую маску работать с различными кредитными карточками?

Я использую 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-ххххх для American Express
хххх-хххх-хххххх для Diners Club
xxxx- хххх-хххх-хххх для всего остального

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

источник

2016-01-28 trs

первые несколько цифр в СЦ сказать вам, какой тип карты это (например, карты VISA все начало с '4'). который расскажет вам, что вам нужно сделать, чтобы отформатировать его. –

Вы действительно хотите, чтобы клиенты, которые несут Amex или Diner's Club? ;) –

@MarcB - ОК спасибо, как я могу работать с Mask в контроллере? – trs

простым способом было бы использовать переменную на объем вашего контроллера для значения маски. Наблюдайте за количеством 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/

источник

2017-03-19 22:06:01 ndmweb

Как заставить угловую маску работать с различными кредитными карточками?

ответ

Смежные вопросы