Comment faire un masque angulaire avec différentes cartes de crédit?

J'utilise AngularUI Mask (https://github.com/angular-ui/ui-mask) sur un champ de carte de crédit.Comment faire un masque angulaire avec différentes cartes de crédit?

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

Mais, selon Stripe (https://stripe.com/docs/testing) toutes les cartes ont 16 chiffres. Comment puis-je permettre aux utilisateurs d'entrer de 14 à 16 chiffres et mettre en forme automatiquement comme:

xxxx-xxxxxx-XXXXX pour American Express
xxxx-xxxx-xxxxxx pour Diners Club
xxxx- xxxx-xxxx-xxxx pour tout le reste

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

Source

2016-01-28 trs

les premiers chiffres dans un CC vous dire quel type de carte, il est (par exemple les cartes VISA tout départ avec '4'). Cela vous dira ce que vous devez faire pour le formater. –

Voulez-vous vraiment des clients qui portent Amex ou Diner's Club? ;) –

@MarcB - OK merci, comment puis-je travailler avec Mask dans le contrôleur? – trs

façon simple serait d'utiliser une variable sur la portée de votre contrôleur pour la valeur de masque. Observez la valeur du nombre cc et modifiez le masque dynamiquement, en fonction du type de carte. Pour que cela fonctionne, vous devez désactiver la validation sur le ui-mask via ui-options. Puis $scope.$watch() la valeur du numéro de la carte à mesure qu'elle change.

Utilisez une correspondance regex de base (grâce à un essentiel par @stefano-bortolotti) pour déterminer le type de carte. Pour une approche plus robuste, vous pouvez utiliser une plus bibliothèque en profondeur comme 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; 
}

Ensuite, changer la variable de masque pour répondre aux exigences de ce type de carte particulière.

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

Mettez tout cela ensemble dans votre contrôleur.

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

Et le code HTML ressemblera à ceci:

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

Exemple: https://jsfiddle.net/gq42wbL5/18/

Source

2017-03-19 22:06:01 ndmweb

Comment faire un masque angulaire avec différentes cartes de crédit?

Répondre

Questions connexes