web-dev-qa-db-fra.com

Formater le numéro de carte de crédit

Comment formater et valider un numéro de carte de crédit avec des espaces entre chaque 4 chiffres lors de la frappe:

eg: 4464 6846 4354 3564

J'ai essayé:

$('.creditno').keyup(function() {
    cc = $(this).val().split("-").join("");

    cc = cc.match(new RegExp('.{1,4}$|.{1,4}', 'g')).join("-");

    $(this).val(cc);

});

S'il vous plaît aider

javascriptphphtml
7
youv

Essaye ça:

function cc_format(value) {
    var v = value.replace(/\s+/g, '').replace(/[^0-9]/gi, '')
    var matches = v.match(/\d{4,16}/g);
    var match = matches && matches[0] || ''
    var parts = []

    for (i=0, len=match.length; i<len; i+=4) {
        parts.Push(match.substring(i, i+4))
    }

    if (parts.length) {
        return parts.join(' ')
    } else {
        return value
    }
}

Remarque: Cochez cette case pour obtenir des informations détaillées https://www.peterbe.com/plog/cc-formatter .

Pour restreindre l'utilisateur à la saisie d'un numéro uniquement:

Voie Javascript

<input type="text" id="txt_cardNumber" name="txt_cardNumber" onkeypress="return checkDigit(event)">

function checkDigit(event) {
    var code = (event.which) ? event.which : event.keyCode;

    if ((code < 48 || code > 57) && (code > 31)) {
        return false;
    }

    return true;
}

OU

function checkDigit() {
    var allowedChars = "0123456789";
    var entryVal = document.getElementById('txt_cardNumber').value();
    var flag;

    for(var i=0; i<entryVal.length; i++){       
        flag = false;

        for(var j=0; j<allowedChars.length; j++){
            if(entryVal.charAt(i) == allowedChars.charAt(j)) {
                flag = true; 
            }
        }

        if(flag == false) { 
            entryVal = entryVal.replace(entryVal.charAt(i),""); i--; 
        }
    }

    return true;
}

Façon HTML5

<input type="text" id="txt_cardNumber" name="txt_cardNumber" pattern="[0-9.]+">
<input type="number" id="txt_cardNumber" name="txt_cardNumber">

jQuery Way

$("#txt_cardNumber").keypress(function (e) {
    if ((e.which < 48 || e.which > 57) && (e.which !== 8) && (e.which !== 0)) {
        return false;
    }

    return true;
});

Remarque: Veuillez vérifier ici pour obtenir plus d’informations sur les différents codes de clé.

13
prava

Je ne pouvais pas trouver une solution raisonnable qui fonctionne avec l'édition de texte, alors voici:

$("#cardNumber").on("keydown", function(e) {
    var cursor = this.selectionStart;
    if (this.selectionEnd != cursor) return;
    if (e.which == 46) {
        if (this.value[cursor] == " ") this.selectionStart++;
    } else if (e.which == 8) {
        if (cursor && this.value[cursor - 1] == " ") this.selectionEnd--;
    }
}).on("input", function() {
    var value = this.value;
    var cursor = this.selectionStart;
    var matches = value.substring(0, cursor).match(/[^0-9]/g);
    if (matches) cursor -= matches.length;
    value = value.replace(/[^0-9]/g, "").substring(0, 16);
    var formatted = "";
    for (var i=0, n=value.length; i<n; i++) {
        if (i && i % 4 == 0) {
            if (formatted.length <= cursor) cursor++;
            formatted += " ";
        }
        formatted += value[i];
    }
    if (formatted == this.value) return;
    this.value = formatted;
    this.selectionEnd = cursor;
});

L’écouteur keydown est nécessaire pour ajuster la position du curseur pour le retour arrière et le supprimer pour se déplacer au-delà des espaces. Il ne doit pas être utilisé pour limiter la saisie de caractères, car vous ne voulez pas utiliser de codes de clé pour cela.

L’écouteur input reconstruit le texte, supprime les non-nombres, ajoute des espaces tous les 4 caractères et préserve la position du curseur.

5
NateS

Trouver 

Plunker pour formater les numéros de carte de crédit

en utilisant la directive angularjs. Formater les numéros de carte en xxxxxxxxxxxxx3456 Fromat.

angular.module('myApp', [])

   .directive('maskInput', function() {
    return {
            require: "ngModel",
            restrict: "AE",
            scope: {
                ngModel: '=',
             },
            link: function(scope, elem, attrs) {
                var orig = scope.ngModel;
                var edited = orig;
                scope.ngModel = edited.slice(4).replace(/\d/g, 'x') + edited.slice(-4);

                elem.bind("blur", function() {
                    var temp;
                    orig  = elem.val();
                    temp = elem.val();
                    elem.val(temp.slice(4).replace(/\d/g, 'x') + temp.slice(-4));
                });

                elem.bind("focus", function() {
                    elem.val(orig);
               });  
            }
       };
   })
  .controller('myCtrl', ['$scope', '$interval', function($scope, $interval) {
    $scope.creditCardNumber = "1234567890123456";
  }]);
2
Sagar Bhosale

Je viens d'écrire ceci pour gérer Visa, Discover, Master Card et Amex (avec formatage et identification du type de carte). 

// SAMPLE FIELD:   <input type="text" name="cstCCNumber" id="cstCCNumber" value=""onkeyup="cc_format('cstCCNumber','cstCCardType');">
    function cc_format(ccid,ctid) {
        // supports Amex, Master Card, Visa, and Discover
        // parameter 1 ccid= id of credit card number field
        // parameter 2 ctid= id of credit card type field

        var ccNumString=document.getElementById(ccid).value;
        ccNumString=ccNumString.replace(/[^0-9]/g, '');
        // mc, starts with - 51 to 55
        // v, starts with - 4
        // dsc, starts with 6011, 622126-622925, 644-649, 65
        // amex, starts with 34 or 37
        var typeCheck = ccNumString.substring(0, 2);
        var cType='';
        var block1='';
        var block2='';
        var block3='';
        var block4='';
        var formatted='';

        if  (typeCheck.length==2) {
            typeCheck=parseInt(typeCheck);
            if (typeCheck >= 40 && typeCheck <= 49) {
                cType='Visa';
            }
            else if (typeCheck >= 51 && typeCheck <= 55) {
                cType='Master Card';
            }
            else if ((typeCheck >= 60 && typeCheck <= 62) || (typeCheck == 64) || (typeCheck == 65)) {
                cType='Discover';
            }
            else if (typeCheck==34 || typeCheck==37) {
                cType='American Express';
            }
            else {
                cType='Invalid';
            }
        }

        // all support card types have a 4 digit firt block
        block1 = ccNumString.substring(0, 4);
        if (block1.length==4) {
            block1=block1 + ' ';
        }

        if (cType == 'Visa' || cType == 'Master Card' || cType == 'Discover') {
            // for 4X4 cards
            block2 = ccNumString.substring(4, 8);
            if (block2.length==4) {
                block2=block2 + ' ';
            }
            block3 = ccNumString.substring(8, 12);
            if (block3.length==4) {
                block3=block3 + ' ';
            }
            block4 = ccNumString.substring(12, 16);
        }
        else if (cType == 'American Express') {
            // for Amex cards
            block2 =  ccNumString.substring(4, 10);
            if (block2.length==6) {
                block2=block2 + ' ';
            }
            block3 =  ccNumString.substring(10, 15);
            block4='';
        }
        else if (cType == 'Invalid') {
            // for Amex cards
            block1 =  typeCheck;
            block2='';
            block3='';
            block4='';
            alert('Invalid Card Number');
        }

        formatted=block1 + block2 + block3 + block4;
        document.getElementById(ccid).value=formatted;
        document.getElementById(ctid).value=cType;
    }
2
Robert H
<?php


function luhn_check($number) {

  // Strip any non-digits (useful for credit card numbers with spaces and hyphens)
  $number=preg_replace('/\D/', '', $number);

  // Set the string length and parity
  $number_length=strlen($number);
  $parity=$number_length % 2;

  // Loop through each digit and do the maths
  $total=0;
  for ($i=0; $i<$number_length; $i++) {
    $digit=$number[$i];
    // Multiply alternate digits by two
    if ($i % 2 == $parity) {
      $digit*=2;
      // If the sum is two digits, add them together (in effect)
      if ($digit > 9) {
        $digit-=9;
      }
    }
    // Total up the digits
    $total+=$digit;
  }

  // If the total mod 10 equals 0, the number is valid
  return ($total % 10 == 0) ? TRUE : FALSE;

}
?>
1
Waruna Manjula
function testCreditCard () {
  myCardNo = document.getElementById('CardNumber').value;
  myCardType = document.getElementById('CardType').value;
  if (checkCreditCard (myCardNo,myCardType)) {
    alert ("Credit card has a valid format")
  } 
  else {alert (ccErrors[ccErrorNo])};
}

vérifiez ce lien pour lib http://www.braemoor.co.uk/software/creditcard.shtml

1
Bhanu

function cc_format(value) {
  var v = value.replace(/\s+/g, '').replace(/[^0-9]/gi, '')
  var matches = v.match(/\d{4,16}/g);
  var match = matches && matches[0] || ''
  var parts = []
  for (i=0, len=match.length; i<len; i+=4) {
    parts.Push(match.substring(i, i+4))
  }
  if (parts.length) {
    return parts.join(' ')
  } else {
    return value
  }
}

onload = function() {
  document.getElementById('cc').oninput = function() {
    this.value = cc_format(this.value)
  }
}
function checkDigit(event) {
    var code = (event.which) ? event.which : event.keyCode;

    if ((code < 48 || code > 57) && (code > 31)) {
        return false;
    }

    return true;
}
<form>
  <input id="cc" value="" placeholder="1234 1234 1234 1234" onkeypress="return checkDigit(event)">
</form>

Démonstration en direct du chiffre de contrôle et formatage du numéro de carte CC

1
gauravbhai daxini

en utilisant vanilla js

javascript:

function formatCreditCardOnKey(event) {
    //on keyup, check for backspace to skip processing
    var code = (event.which) ? event.which : event.keyCode;
    if(code != 8)
        formatCreditCard();
    else{
        //trim whitespace from end; trimEnd() doesn't work in IE
        document.getElementById("cardNumber").value = document.getElementById("cardNumber").value.replace(/\s+$/, '');
    }

}

function formatCreditCard() {
    var cardField = document.getElementById("cardNumber");
    //remove all non-numeric characters
    var realNumber = cardField.value.replace(/\D/g,'');
    var newNumber = "";
    for(var x = 1; x <= realNumber.length; x++){
        //make sure input is a digit
        if (isNumeric(realNumber.charAt(x-1)))
            newNumber += realNumber.charAt(x-1);
        //add space every 4 numeric digits
        if(x % 4 == 0 && x > 0 && x < 15)
            newNumber += " ";
    }
    cardField.value = newNumber;
}

function isNumeric(char){
    return('0123456789'.indexOf(char) !== -1);
}

HTML:

<input type="text" id="cardNumber" maxlength="19" onKeyUp="formatCreditCardOnKey(event)" onBlur="formatCreditCard()" onFocus="formatCreditCard()"/>

Cela fonctionne (pour moi) avec la saisie automatique, permet à l'utilisateur d'utiliser le retour arrière comme prévu (il n'est pas nécessaire de supprimer les espaces) et n'autorise pas les (autres) caractères non numériques.

0
Russell Chisholm