Форма ввода кредитной карты с использованием jQuery

Question

Я пытаюсь создать на своем веб-сайте эстетически приятную форму для ввода кредитной карты.

Я бы хотел, чтобы форма отображалась в следующем формате:

1234-1234-1234-1234

Любое не десятичное число будет проигнорировано, и 5-й символ (представленный дефисом) может быть введен пользователем в виде числа (становится 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, '')

мы фильтруем входные данные, чтобы они содержали только цифры.Затем:

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

мы разбиваем строку чисел на 4-значные куски.Тогда:

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

если массив, мы объединяем массив, вставляя тире между кусками.В противном случае мы просто устанавливаем пустую строку.

Answer 2

Ваша первая проблема заключается в предположении, что все номера кредитных карт представляют собой четыре группы из четырех чисел - это не так .

Это правда, что большинство карт Visa, MasterCard и Discoverпоказать свои 16-значные номера счетов в группах по четыре.Однако номера карт American Express состоят из 15 цифр и сгруппированы 4-6-5.(Я уверен, что вы не хотите отчуждать владельцев карт Amex.) Некоторые старые карты Visa имеют 13-значные номера счетов.

Вы можете применить некоторые смарт-коды в своем скрипте, чтобы определить тип вводимой карты.,Карты Amex начинаются с 34 или 37, поэтому вы можете использовать требования к группировке и длине Amex, если пользователь начинает вводить карту Amex.Используйте вики-диаграмму в качестве отправной точки для формулирования правил для других карт.

Вы также можете проверить контрольную сумму для карт, которые используют алгоритм Луна .

Answer 3

Я бы использовал плагин маски. Я имел большой успех с http://digitalbush.com/projects/masked-input-plugin/