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 :
- credit_card_pattern qui vérifie la validité du numéro ;
- 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) {
let 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
- /v202002241320.cc-validator.css
- Javascript
- /v202002241320.cc-validator.js
- Logos (SVG)
- /svg/cc.svg
Voir aussi…
- Conversion SVG/CSS Encodage SVG pour CSS compatible Sass et exemple d'intégration SVG via xlink compatible CSS
- Optimisation SVG Intégration SVG via xlink/use/symbol, factorisation de symbol SVG
- Responsive SVG Utilisation des media queries internes au SVG
- LazyLoad Intersection Observer LazyLoad avec IntersectionObserver API pour images, picture, iframe, etc.
- Design, flux et accessibilité jQuery Responsive layout logical DOM plugin
- Lightbox Responsive et Accessible Lightbox images jQuery Responsive accessible a11y. Automatisation d'une Lightbox multipages. Lightbox image unique ou multiple. Lightbox responsive et accessible a11y wcag
- Tooltip (infobulle) a11y Tooltip (infobulle) compatible a11y et SEO, naviguable au clavier, accessible par lecteur d'écran
- Vérifier un numéro de carte bancaire Validateur de carte bancaire. Contrôle de format de numéro de carte bancaire, algorithme de Luhn carte de crédit Visa, Mastercard, Maestro, CB, Carte Bancaire, Discover Card, American Express, JCB Cards
- Owl Carousel multiple Créer et gérer plusieurs carrousels / sliders sur une seule page avec Owl Carousel 2. Create and manage multiple carousel/sliders on one page with Owl Carousel 2
- Zipcode patterns Contrôle automatisé de codes postaux
- Responsive background-image jQuery responsive background-image plugin
- Drapeaux ISO 3366 SVG Drapeaux nationaux vectoriels normés ISO alpha 2, alpha 3 et numérotation Organisation des Nations Unies (ONU). SVG drapeaux pour internationalisation de sites multilingues.
- Layout rigolo
- Serveur d'images placeholders Serveur d'images placeholder pour le développement front-end.
- Générateur de Lorem Outil de génération de Lorem Ipsum. Utilisable en ligne ou par url distante.
- Générateur de noms API de génération de couples prénom/nom aléatoires.
Droits Réservés. Information sur la propriété intellectuelle.
L'intégralité des contenus, notamment les photographies, sont la propriété de Anthony Ladeuil en tant qu'auteur. Aucune photographie présente sur le site ne provient de quelque autre source.
Toutes les photographies présentes sur www.kortic.com sont soumises au droit d'auteur conformément au Code de la propriété intellectuelle - Article L112-2
Toutes les photographies présentes sur www.kortic.com sont soumises au droit d'auteur conformément au Code de la propriété intellectuelle - Article L112-2