RegEx и Keyup для обнаружения кредитных карт

Question

Я не получаю правильный результат от обнаружения кредитной карты jQuery, который я собрал. Событие keyup вызывает функцию creditCardTypeFromNumber (num), и предполагается, что тип кредитной карты будет обнаружен. К сожалению, единственное, что возвращается, - «UNKNOWN», независимо от того, какое значение вводится. Я использовал 6011 (открыть), 5155 (MasterCard) и 4147 (Visa), ни одна из которых не работает.

Я использовал 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'; 
} 

Answer 1

Это работает правильно, насколько я могу судить.

Проблема в том, что вы вводите только 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; 
     } 
    } 
} 

Таким образом, вы можете добавить новые карты просто наклеивать в новом регулярном выражении выше «неизвестный» :)

Answer 2

Я не убедили, что ваши регулярные выражения верны для того, как вы их используете? Попробуйте их на https://regex101.com/.

Причина маршрута, по-видимому, является квалификаторами, например. [0-9] {5,} для основной карты ожидается от 5 до неограниченного количества цифр, что не соответствует тому, что вы вводите. Я бы посоветовал, что главное регекс карты может быть больше похож на ^5[1-5][0-9]{2}.