用于信用卡检测的RegEx和Keyup
我没有收到我放在一起的信用卡检测jQuery的正确输出。 keyup事件调用函数creditCardTypeFromNumber（num），并且应该检测信用卡类型。 不幸的是，无论输入什么值，唯一返回的是'UNKNOWN'。我使用了6011（发现），5155（万事达卡）和4147（Visa），其中没有一个可行。
我在帖子中使用了每个信用卡类型的RegEx：
如何根据数字检测信用卡类型？
我把这两个功能放在一起，基于这里所做的：
jquery找到信用卡类型
我已经放在一起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';
}
据我所知，它工作正常。
问题在于你只输入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;
}
}
}
通过这种方式，您可以通过粘贴新的正则表达式来添加新卡片，即'未知':)
我不相信你的正则表达式对你使用它们的方式是正确的吗？ 在https://regex101.com/上尝试一下。
对于主卡，路由原因似乎是限定符，例如[0-9] {5，}预计在5和无限数字的数字之间，这与您输入的数字不匹配。 我建议主卡正则表达式可能需要更像^5[1-5][0-9]{2} 。