jQuery를 사용하여 신용 카드 입력 양식

Question

나는 내 웹 사이트에 예술적으로 기쁜 신용 카드 입력 양식을 만들려고 노력하고 있습니다.

나는 다음과 같은 형식으로 표시 할 양식을 싶습니다

1234-1234-1234-1234 

이 아닌 모든 진수는 사용자가 입력 할 수 무시하고 (하이픈으로 표시) 5 문자된다 숫자 (cc의 다섯 번째 숫자가 됨), 공백 또는 하이픈으로 표시됩니다.

다음의 모든 입력은 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, '') 

숫자를 포함하도록 입력을 필터링합니다. 그 다음 :

우리는 4 자리 청크로 숫자 문자열을 나눕니다. 다음 :

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

배열 인 경우, 우리는 청크 사이에 대시를 삽입하여 배열을 결합합니다. 그렇지 않으면 빈 문자열로 설정합니다.

Answer 2

마스크 플러그인을 사용합니다. 나는 큰 성공을 거두었습니다 http://digitalbush.com/projects/masked-input-plugin/

Answer 3

첫 번째 문제는 모든 신용 카드 번호가 네 개의 숫자로 구성된 네 개의 그룹 인 가정입니다. – this is not true.

대부분의 Visa, MasterCard 및 Discover 카드는 16 자리 계정 번호를 4 개 그룹으로 표시합니다. 그러나 American Express 카드 번호는 이며 grouped 4-6-5입니다. (저는 Amex 카드 소지자를 멀 리고 싶지 않습니다.) 일부 오래된 Visa 카드에는 13 자리 계정 번호가 있습니다.

어떤 종류의 카드가 입력되었는지 감지 할 때 스크립트에 지능을 적용 할 수 있습니다. Amex 카드는 34 또는 37로 시작하므로 사용자가 Amex 카드를 입력하기 시작하면 Amex 그룹 및 길이 요구 사항을 사용할 수 있습니다. Wiki chart을 다른 카드의 규칙을 공식화하기위한 출발점으로 사용하십시오.

Luhn algorithm을 사용하는 카드의 경우 validate the checksum 수 있습니다.