使用 jQuery 的信用卡输入表单答案

【问题标题】：Credit Card Input Form Using jQuery使用 jQuery 的信用卡输入表单
【发布时间】：2012-03-29 10:52:48
【问题描述】：

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

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

1234-1234-1234-1234

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

例如以下所有输入将在输入中显示为1234-1

12341
1234 1
1234-1
123whoops4 1

【问题讨论】：

你的问题呢？你被困在哪里了？
请记住，并非所有信用卡都采用 4 组 4 个数字的形式。美国运通卡 4-6-5。

标签： jquery input forms

【解决方案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('-') : '';

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

【讨论】：

这真的很酷。有没有办法在用户输入的时候做，而不是在他们把焦点从输入框中移开之后？
你可以这样做on keyup instead of on blur，但是插入符号总是会跳到最后（即使他们在字符串中间添加数字）。不过，您可以使用this jQuery plugin 来控制插入符号的位置。

【解决方案2】：

我会使用掩码插件。我在http://digitalbush.com/projects/masked-input-plugin/ 上取得了巨大的成功

【讨论】：

【解决方案3】：

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

确实，大多数 Visa、MasterCard 和 Discover 卡以四个一组的形式显示其 16 位帐号。但是，美国运通卡号为 15 位数字，为grouped 4-6-5。（我确定您不想疏远美国运通卡持卡人。）一些较旧的 Visa 卡有 13 位数的帐号。

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

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

【讨论】：

感谢您提供的信息。我不知道