Question

我正在尝试在我的网站上制作一个美观的信用卡输入表格。

我想要一个以下列格式显示的表单：

1234-1234-1234-1234

任何非十进制数字都将被忽略，并且第五个字符（由连字符表示）可以由用户输入为数字（成为cc的第5个数字），空格或连字符。

e.g。所有以下输入都将在输入中显示为1234-1

12341
1234 1
1234-1
123whoops4 1

Answer 1

试试这个：

$('#theInput').blur(function()
{
    $(this).val(function(i, v)
    {
        var v = v.replace(/[^\d]/g, '').match(/.{1,4}/g);
        return v ? v.join('-') : '';
    });
});

在此处试试：http://jsfiddle.net/hnbx4/

以下是解释：

首先：

v.replace(/[^\d]/g, '')

我们过滤输入以仅包含数字。然后：

.match(/.{1,4}/g);

我们将数字串分成4位数字块。然后：

return v ? v.join('-') : '';

如果是数组，我们通过在块之间插入破折号来组合数组。否则我们只需将其设置为空字符串。

Answer 2

您的第一个问题是假设所有信用卡号码都是四组四个数字 - this is not true。

大多数Visa，MasterCard和Discover卡都是以四人一组的形式显示他们的16位帐号。但是，美国运通卡号码 15 位且grouped为4-6-5。（我相信你不想疏远美国运通卡持卡人。）一些旧的Visa卡有13位数的账号。

您可以在脚本中应用一些智能功能，以检测输入的是哪种卡。 Amex卡以34或37开头，因此如果用户开始输入Amex卡，您可以使用Amex分组和长度要求。使用Wiki chart作为起点，为其他卡制定规则。

对于使用validate the checksum的卡片，您还可以Luhn algorithm。

Answer 3

我会使用一个掩码插件。我在http://digitalbush.com/projects/masked-input-plugin/

取得了巨大的成功

信用卡输入表格使用jQuery

3 个答案: