信用卡输入表格使用jQuery

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

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

1234-1234-1234-1234 

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

例如，以下所有输入都将在输入中显示为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

你的第一个问题是假设所有信用卡号码都是四组四个数字 – 这不是真的 。

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

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

您还可以validation使用Luhn算法的卡的校验和 。

Answer 3

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