RegEx和Keyup用于信用卡检测

时间:2015-05-02 23:18:53

标签: javascript jquery regex

我没有从信用卡检测jQuery中收到正确的输出。 keyup事件调用函数creditCardTypeFromNumber(num),并且应该检测信用卡类型。不幸的是,唯一返回的是' UNKNOWN'无论输入什么价值。我使用过6011(发现),5155(万事达卡)和4147(维萨卡),但都没有。

我在这里的帖子中使用了每种信用卡类型的RegEx:

How do you detect Credit card type based on number?

我根据这里所做的事情将这两个功能放在一起:

Jquery find credit card type

我把一个JSFiddle放在一起,表明它不起作用。如果有人可以帮助我,我真的很感激。感谢

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

3 个答案:

答案 0 :(得分:3)

据我所知,它正常工作。

问题在于你只输入4位数,这还不足以识别卡片 - 这些正则表达式所寻找的模式并不那么简单。

尝试输入6011000,例如,您会看到它被识别为“发现”。

此外,您的代码可能更简洁/可维护:

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

这样您就可以通过粘贴“未知”上方的新正则表达式来添加新卡片:)。

答案 1 :(得分:1)

我不相信你的正则表达式对你使用它们的方式是否正确?在https://regex101.com/处试试。

路线原因似乎是限定符,例如主卡的[0-9] {5,}预计在5和无限数字之间,这与您输入的内容不相符。我建议主卡正则表达式可能需要更像^5[1-5][0-9]{2}

答案 2 :(得分:0)

根据号码找出信用卡或借记卡的类型。 为此,我们需要将所有输入的数字发送到以下功能。

getCardType(number) {
  let cards = {
    VISA: /^4[0-9]{12}(?:[0-9]{3})?$/,
    MASTER: /^5[1-5][0-9]{14}$/,
    AEXPRESS: /^3[47][0-9]{13}$/,
    DINERS: /^3(?:0[0-5]|[68][0-9])[0-9]{11}$/,
    DISCOVERS: /^6(?:011|5[0-9]{2})[0-9]{12}$/,
    JCB: /^(?:2131|1800|35\d{3})\d{11}$/,
    BCGLOBAL: /^(6541|6556)[0-9]{12}$/,
    INSTAPAYMENT: /^63[7-9][0-9]{13}$/,
    CARTEBLANCHE: /^389[0-9]{11}$/,
    KOREANLOCAL: /^9[0-9]{15}$/,
    LASER: /^(6304|6706|6709|6771)[0-9]{12,15}$/,
    MAESTRO: /^(5018|5020|5038|6304|6759|6761|6763)[0-9]{8,15}$/,
    SOLO: /^(6334|6767)[0-9]{12}|(6334|6767)[0-9]{14}|(6334|6767)[0-9]{15}$/,
    SWITCH: /^(4903|4905|4911|4936|6333|6759)[0-9]{12}|(4903|4905|4911|4936|6333|6759)[0-9]{14}|(4903|4905|4911|4936|6333|6759)[0-9]{15}|564182[0-9]{10}|564182[0-9]{12}|564182[0-9]{13}|633110[0-9]{10}|633110[0-9]{12}|633110[0-9]{13}$/,
    UNIONPAY: /^(62[0-9]{14,17})$/,
    VISAMASTER: /^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14})$/
  };

  for (var card in cards) {
    if (cards[card].test(number)) {
      return card;
    } else {
      return 'INVALID'
    }
  }
}

此功能将返回卡的类型。 试试看。享受吧!