README

这是一个来自jqueryscript.net的jQuery信用卡验证器。

一个简单的jQuery插件，用于在用户输入时检查和显示信用卡类型，并在验证正确长度后提供Bootstrap验证类以进行Luhn校验。

如何使用

1. 在网页中包含必要的jQuery库和Bootstrap的CSS。

1. 创建一个信用卡输入文本字段。

4. 将默认信用卡图片添加到信用卡输入中的CSS。

1 #checkout_card_number { 2 background-image: url(cards.png); 3 background-position: 3px 3px; 4 background-size: 40px 252px; 5 background-repeat: no-repeat; 6 padding-left: 48px; 7 } 5. JavaScript代码。

var ('#checkout_card_number'); $('#checkout_card_number').validateCreditCard(function(result) {

if (result.card_type != null) {

switch (result.card_type.name) { case "visa": $cardinput.css('background-position', '3px -34px'); $cardinput.addClass('card_visa'); break;

case "visa_electron": $cardinput.css('background-position', '3px -72px'); $cardinput.addClass('card_visa_electron'); break;

case "mastercard": $cardinput.css('background-position', '3px -110px'); $cardinput.addClass('card_mastercard'); break;

case "maestro": $cardinput.css('background-position', '3px -148px'); $cardinput.addClass('card_maestro'); break;

case "discover": $cardinput.css('background-position', '3px -186px'); $cardinput.addClass('card_discover'); break;

case "amex": $cardinput.css('background-position', '3px -223px'); $cardinput.addClass('card_amex'); break;

default: $cardinput.css('background-position', '3px 3px'); break; } } else { $cardinput.css('background-position', '3px 3px'); }

// 检查有效的卡号 - 只有在长度正确时才显示无效Luhn的验证检查，以免在用户输入时造成混淆。 if (result.length_valid || $cardinput.val().length > 16) { if (result.luhn_valid) { $cardinput.parent().removeClass('has-error').addClass('has-success'); } else { $cardinput.parent().removeClass('has-success').addClass('has-error'); } } else { $cardinput.parent().removeClass('has-success').removeClass('has-error'); } }}