Автоматическое определение типа карты

При вводе номера банковской карты в интерфейсе ключевая задача — не только корректно отформатировать строку, но и своевременно определить платёжную систему. Это позволяет адаптировать поведение формы: менять маску ввода, показывать логотип, выполнять предварительную валидацию и снижать количество ошибок пользователя. В Cleave.js этот сценарий реализован через встроенный механизм анализа BIN-последовательностей и сопоставления их с известными префиксами карт.

Основой является параметр конфигурации, активирующий специализированную логику обработки номера:

const cleave = new Cleave(inputElement, {
    creditCard: true
});

При включении creditCard: true библиотека переключается в режим обработки платежных карт. В этом режиме входная строка рассматривается не как обычное число, а как последовательность, подлежащая форматированию и классификации.

Дополнительно Cleave.js начинает применять правила группировки цифр (например, 4-4-4-4 для Visa/Mastercard или 4-6-5 для American Express), а также запускает механизм определения типа карты по мере ввода.

Принцип распознавания типа карты

Определение типа карты основано на анализе начальных цифр (BIN — Bank Identification Number). Каждый платёжный провайдер использует собственные диапазоны префиксов:

  • Visa — начинается с 4
  • Mastercard — диапазоны 51–55 и 2221–2720
  • American Express — 34 или 37
  • Discover — 6011, 65 и другие диапазоны

Cleave.js хранит внутренние правила сопоставления префиксов и по мере ввода последовательно проверяет текущую строку. Алгоритм работает инкрементально: после каждого символа выполняется проверка на совпадение с известными масками.

Важно, что распознавание происходит не после завершения ввода, а в реальном времени. Это позволяет заранее адаптировать интерфейс, не дожидаясь полной длины номера.

Обработка события изменения типа карты

Одной из ключевых возможностей является реакция на смену определённого типа карты. Для этого используется callback:

const cleave = new Cleave(inputElement, {
    creditCard: true,
    onCreditCardTypeChanged: function (type) {
        console.log(type);
    }
});

Функция onCreditCardTypeChanged вызывается каждый раз, когда библиотека фиксирует изменение предполагаемого типа карты. Значение type представляет собой строковый идентификатор, например:

  • visa
  • mastercard
  • amex
  • discover
  • unknown

Этот механизм особенно важен для динамического UI. Например, можно переключать иконки платёжных систем или изменять подсказки в зависимости от текущего значения.

Динамическое форматирование под тип карты

Одной из менее очевидных, но критически важных особенностей является адаптация маски ввода под конкретную карту. Cleave.js не просто определяет тип, но и изменяет правила группировки цифр.

Для American Express используется формат:

XXXX XXXXXX XXXXX

Для большинства других карт:

XXXX XXXX XXXX XXXX

Эта логика встроена в библиотеку и активируется автоматически после определения типа. При этом на ранних этапах ввода, когда тип ещё не определён, используется универсальная маска, которая затем корректируется.

Строгий режим определения

Для повышения точности можно включить строгий режим:

const cleave = new Cleave(inputElement, {
    creditCard: true,
    creditCardStrictMode: true
});

В этом режиме библиотека менее терпима к частичным совпадениям префиксов. Это снижает вероятность ложного определения типа карты на ранних этапах ввода, особенно когда введено всего 1–2 символа.

Поведение в строгом режиме:

  • тип карты не определяется до появления достаточного количества цифр
  • исключаются промежуточные неопределённые состояния
  • повышается стабильность переключения между типами

Внутренняя модель сопоставления BIN

Логика определения основана на наборе правил вида:

  • фиксированные префиксы (например, 4 для Visa)
  • диапазоны (51–55 для Mastercard)
  • сложные диапазоны (2221–2720 для новых Mastercard BIN)

При вводе Cleave.js выполняет проверку по принципу «наибольшего совпадения». Если текущая последовательность подходит под несколько типов, выбирается наиболее специфичное правило или сохраняется состояние unknown.

Это важно для новых диапазонов карт, где пересечения встречаются чаще, чем в классических схемах.

Изменение поведения интерфейса на основе типа карты

Распознанный тип карты часто используется для управления интерфейсом:

  • отображение логотипа платёжной системы
  • изменение placeholder
  • включение/отключение дополнительных полей (например, CVV длины 4 для American Express)
  • предварительная валидация длины номера

Cleave.js предоставляет только механизм определения, а вся реактивная логика обычно реализуется на уровне приложения через callback.

Пример интеграции с UI:

onCreditCardTypeChanged: function (type) {
    const icon = document.querySelector('.card-icon');

    icon.className = 'card-icon';

    if (type !== 'unknown') {
        icon.classList.add(type);
    }
}

Валидационные ограничения и длина номера

Каждый тип карты имеет свою максимальную длину:

  • Visa — 13, 16 или 19 цифр
  • Mastercard — 16 цифр
  • American Express — 15 цифр
  • Discover — 16–19 цифр

Cleave.js использует эти ограничения для корректировки поведения ввода. При достижении максимальной длины дальнейший ввод может быть ограничен или игнорироваться, в зависимости от конфигурации.

Это снижает вероятность некорректных номеров уже на этапе ввода, не дожидаясь серверной проверки.

Особенности неопределённого состояния

На ранних этапах ввода, когда введено недостаточно данных для классификации, тип карты определяется как unknown. Это нормальное состояние, которое не следует интерпретировать как ошибку.

В этот момент:

  • применяется универсальная маска
  • не активируются специфичные правила длины CVV
  • UI может показывать нейтральное состояние

По мере увеличения длины номера происходит постепенное уточнение типа.

Ограничения и поведение при конфликте префиксов

Некоторые диапазоны BIN пересекаются или расширяются с течением времени. В таких случаях Cleave.js использует приоритетность правил. Однако в случае неоднозначности возможно кратковременное переключение между типами при вводе каждой новой цифры.

Типичная ситуация:

  • ввод начинается как 5 → возможны Mastercard
  • добавление 4 → сужение диапазона
  • дальнейшие цифры окончательно фиксируют тип

Такая динамика является нормальной частью инкрементального анализа.

Интеграция с пользовательской логикой валидации

Хотя Cleave.js не выполняет полноценную проверку валидности номера (например, алгоритм Луна), определение типа карты часто используется как первый слой валидации. На основе типа можно применять дополнительные правила:

  • проверка длины
  • проверка CVV
  • проверка допустимости страны выпуска (если применимо)

Таким образом, механизм определения типа карты становится точкой входа в более сложную систему валидации платёжных данных.

Оглавление