RegEx and Keyup for Credit Card Detection

I'm not receiving the correct output from the credit card detection jQuery I've put together. The keyup event calls a function, creditCardTypeFromNumber(num), and the credit card type is supposed to be detected. Unfortunately, the only thing that is returned is 'UNKNOWN' no matter what value is typed in. I've used 6011 (discover), 5155 (MasterCard), and 4147 (Visa), none of which works.

I used the RegEx of each Credit Card type from the post here:

How do you detect Credit card type based on number?

And I put these two functions together based on what was done here:

Jquery find credit card type

I've put together a JSFiddle to show it not working. If someone could help me, I'd really appreciate it. Thanks

http://jsfiddle.net/nx6bbjzx/

creditCardTypeAction();

/**
  * Detect Credit Card Type Function
  */
function creditCardTypeAction(){
    $('.creditcardnumber').on('keyup', function(){
        if($(this).val().length >= 4){
            cardType = creditCardTypeFromNumber($(this).val());
        }
    });
}

function creditCardTypeFromNumber(num) {

    // first, sanitize the number by removing all non-digit characters.
    num = num.replace(/[^d]/g,'');

    // MasterCard
    if (num.match(/^5[1-5][0-9]{5,}$/)) {
        $('.cardsacceptedicon').removeClass('active');
        $('.cardsacceptedicon.mastercard').addClass('active');

        alert('MasterCard');
        return 'MasterCard';

    // Visa
    } else if ( num.match(/^4[0-9]{6,}$/) ) {
        $('.cardsacceptedicon').removeClass('active');
        $('.cardsacceptedicon.visa').addClass('active');

        alert('Visa');
        return 'Visa';

    /* AMEX */
    } else if (num.match(/^3[47][0-9]{5,}$/)) {
        $('.cardsacceptedicon').removeClass('active');
        $('.cardsacceptedicon.amex').addClass('active');

        alert('AMEX');
        return 'AMEX';

    // Discover
    } else if (num.match(/^6(?:011|5[0-9]{2})[0-9]{3,}$/)) {
        $('.cardsacceptedicon').removeClass('active');
        $('.cardsacceptedicon.discover').addClass('active');

        alert('Discover');
        return 'Discover';

    // Diners Club
    } else if (num.match(/^3(?:0[0-5]|[68][0-9])[0-9]{4,}$/)){
        $('.cardsacceptedicon').removeClass('active');
        $('.cardsacceptedicon.diners').addClass('active');

        alert('Diners Club');
        return 'Diners Club';

    // JCB
    } else if (num.match(/^(?:2131|1800|35[0-9]{3})[0-9]{3,}$/)){
        $('.cardsacceptedicon').removeClass('active');
        $('.cardsacceptedicon.jcb').addClass('active');

        alert('JCB');
        return 'JCB';
    }

    alert('UNKNOWN');
    return 'UNKNOWN';
}

---

It's working correctly as far as I can tell.

The problem is that you're only entering 4 digits, which isn't enough to identify the cards - the patterns that those regular expressions look for aren't that simple.

Try entering 6011000 for example and you'll see it identified as "Discover".

Also your code could be more concise / maintainable :

    function creditCardTypeFromNumber( num ) {
    // Sanitise number
    num = num.replace(/[^d]/g,'');

    var regexps = {
        'mastercard' : /^5[1-5][0-9]{5,}$/,
        'visa' : /^4[0-9]{6,}$/,
        'amex' : /^3[47][0-9]{5,}$/,
        'discover' : /^6(?:011|5[0-9]{2})[0-9]{3,}$/,
        'diners' : /^3(?:0[0-5]|[68][0-9])[0-9]{4,}$/,
        'jcb' : /^(?:2131|1800|35[0-9]{3})[0-9]{3,}$/,
        'unknown' : /.*/,
    };

    for( var card in regexps ) {
        if ( num.match( regexps[ card ] ) ) {
            console.log( card );
            $( '.cardsacceptedicon' ).removeClass( 'active' );
            $( '.cardsacceptedicon.' + card ).removeClass( 'active' );
            $( 'div.ccvalue' ).html( card );
            return card;
        }
    }
}

This way you can add new cards just by pasting in the new regular expression above 'unknown' :)

---

I'm not convinced your regexs are correct for the way you are using them? Try them out at https://regex101.com/.

The route cause seems to be the the qualifiers eg [0-9]{5,} for master card is expecting between 5 and an unlimited number of digits, which won't match what you are entering. I would suggest the master card regex might need to be more like ^5[1-5][0-9]{2} .

链接地址: http://www.djcxy.com/p/70716.html

上一篇: 防止使用信用卡礼品卡？

下一篇: 用于信用卡检测的RegEx和Keyup