jQueryを使用したクレジットカード入力フォーム

Question

私は自分のウェブサイトに美しいクレジットカード入力フォームを作成しようとしています。

私は、次の形式で表示するには、フォームが欲しい：

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

私はマスクプラグインを使用します。私は大成功を収めましたhttp://digitalbush.com/projects/masked-input-plugin/

Answer 3

あなたの最初の問題は、すべてのクレジットカード番号が4つの数字の4つのグループであることです。– this is not trueです。

ほとんどのVisaカード、MasterCardカード、Discoverカードでは、4桁の16桁のアカウント番号が表示されます。ただし、American Expressのカード番号はで、grouped 4-6-5です。 （私はあなたがAmexのカード所有者を離れたくないと確信しています。）古いVisaカードには13桁のアカウント番号があります。

入力されたカードの種類を検出する際に、スクリプトにスマートを適用することができます。 Amexカードは34または37で始まるので、ユーザーがAmexカードの入力を開始する場合は、Amexのグループ化および長さの要件を使用できます。 Wiki chartを他のカードのルールを策定するための出発地として使用してください。

Luhn algorithmを使用するカードの場合は、validate the checksumにすることもできます。