Kortic, Anthony Ladeuil

Valider un numéro de carte bancaire

    Script complet (CSS, JS, SVG) de validation à la volée de formats de cartes de crédit.
    Le but n'est pas de faire un cours sur l'algorithme de Luhn et sur les patterns, le script valide le numéro selon le type de carte (Visa, Carte bancaire, Mastercard, Maestro, American Express, Discover, JCB Card, Diners Club).
    La fonction est en deux partie :

    1. credit_card_pattern qui vérifie la validité du numéro ;
    2. une fonction « locale » qui utilise credit_card_pattern à adapter selon vos besoins.

    Exemple de validations

    Saisir un numéro de carte dans un champ ou cliquer sur un numéro proposé. Pour chaque carte, le 3ème numéro est invalide.

    Numéros « Visa » :
    4291 1868 2920 9789
    4373 0977 3270 0163
    4291 1868 2920 9889
    + Effacer
    Numéros « Carte bancaire » :
    4837 5170 3031 5679
    4737 2893 2381 1274
    4737 2893 5381 1374
    + Effacer
    Numéros « Mastercard » :
    5512 3755 1312 9672
    5374 0521 0623 4089
    5374 0521 0622 4089
    + Effacer
    Numéros « Maestro » :
    5333 5933 1005 5687
    5282 4065 4325 9318
    5282 4065 4325 0318
    + Effacer
    Numéros « American Express » :
    3487 8228 3860 066
    3735 5071 1452 204
    3735 5071 1451 204
    + Effacer
    Numéros « Discover » :
    6011 1151 8027 2080
    6011 2058 2673 3031
    6011 2058 2673 3030
    + Effacer
    Numéros « JCB Card » :
    3588 9580 0266 3584
    3549 2173 2553 3422
    3549 2173 2553 3423
    + Effacer
    Numéros « Diners Club » :
    3000 4715 4611 88
    3004 2745 8721 31
    3004 2745 8721 41
    + Effacer

    Source des numéros : https://ccardgenerator.com/fr/

    Si vous souhaitez participer, même modestement, au maintien du site et pour son usage, vous pouvez cliquer sur le joli bouton…

    Sources Javascript

    ;(function ($) {

        'use strict';

        $.fn.credit_card_pattern = function() {

            let creditCardsPatterns = {
                    visa:        /^4[0-9]{12}(?:[0-9]{3})?$/,
                    cb:            /^4[0-9]{12}(?:[0-9]{3})?$/,
                    mastercard:    /^5[1-5][0-9]{14}$|^2(?:2(?:2[1-9]|[3-9][0-9])|[3-6][0-9][0-9]|7(?:[01][0-9]|20))[0-9]{12}$/,
                    maestro:    /^5[1-5][0-9]{14}$|^2(?:2(?:2[1-9]|[3-9][0-9])|[3-6][0-9][0-9]|7(?:[01][0-9]|20))[0-9]{12}$/,
                    amex:        /^3[47][0-9]{13}$/,
                    discover:    /^65[4-9][0-9]{13}|64[4-9][0-9]{13}|6011[0-9]{12}|(622(?:12[6-9]|1[3-9][0-9]|[2-8][0-9][0-9]|9[01][0-9]|92[0-5])[0-9]{10})$/,
                    diners:        /^3(?:0[0-5]|[68][0-9])[0-9]{11}$/,
                    jcb:        /^(?:2131|1800|35[0-9]{3})[0-9]{11}$/
                },

                creditCardsLabels = {
                    visa:        'Visa',
                    cb:            'Carte Bancaire',
                    mastercard:    'Mastercard',
                    maestro:    'Maestro',
                    amex:        'American Express',
                    discover:    'Discover',
                    diners:        'Diners Club',
                    jcb:        'JCB Card'
                },

                checkLuhn = function (luhn) {
                    var ca,
                        sum = 0,
                        mul = 0,
                        len = luhn.length;

                    while (len--) {
                        ca = parseInt(luhn.charAt(len),10) << mul;
                        sum += ca - (ca > 9) * 9;
                        mul ^= 1;
                    }

                    return (sum % 10 === 0) && (sum > 0);
                },

                checkCreditCard = function (value, key) {

                    let val = value.replace(/\D/g, '');

                    return creditCardsPatterns[key].test(val) && checkLuhn(val);
                };


            let cardnumber = $(this);

            return checkCreditCard(cardnumber.val(), cardnumber.attr('data-cc-type'));

        };

    })(jQuery);         $('[data-cc-type]').each( function() {

        let cardnumber = $(this);

        cardnumber.on({

            'input': function() {

                (cardnumber.val().length)
                    ? (cardnumber.attr('data-valid', !cardnumber.credit_card_pattern() ? 'false' : 'true'))
                    : cardnumber.attr('data-valid', null);

            }

        });

    });

    Source CSS


    [class*=credit-card-] {
        background-size: 2rem 2rem;
        background-position: calc(100% - 0.375rem) center;
        padding-right: 2.625rem;
    }

    [class*=credit-card-][data-valid='true'] {
        background-color: rgba(160, 255, 170, .3);
    }

    [class*=credit-card-][data-valid='false'] {
        background-color: rgba(255, 175, 190, .3);
    }

    .credit-card-amex {
        background-image: url('/svg/cc.svg#cc-amex');
    }

    .credit-card-cb {
        background-image: url('/svg/cc.svg#cc-cb');
    }

    .credit-card-discover {
        background-image: url('/svg/cc.svg#cc-discover');
    }

    .credit-card-jcb {
        background-image: url('/svg/cc.svg#cc-jcb');
    }

    .credit-card-mastercard {
        background-image: url('/svg/cc.svg#cc-mastercard');
    }

    .credit-card-maestro {
        background-image: url('/svg/cc.svg#cc-maestro');
    }

    .credit-card-visa {
        background-image: url('/svg/cc.svg#cc-visa');
    }

    .credit-card-diners {
        background-image: url('/svg/cc.svg#cc-diners');
    }

    Les sources

    CSS
    /v20191215.cc-validator.css
    Javascript
    /v20191215.cc-validator.js
    Logos (SVG)
    /svg/cc.svg
    Voir aussi…
    2019-12-16