IBAN

IBAN (International Bank Account Number) в контексте Inputmask представляет собой специализированный алиас маски ввода, предназначенный для корректного форматирования и частичной валидации международных банковских счетов. IBAN имеет строгую структуру, включающую код страны, контрольные цифры и основной номер счёта, длина которого варьируется в зависимости от страны. Основная задача маски — обеспечить единый формат ввода и снизить количество ошибок при ручном вводе.

IBAN состоит из следующих компонентов:

  • Код страны — 2 латинские буквы (например, DE, FR, GB)
  • Контрольные цифры — 2 цифры
  • BBAN (Basic Bank Account Number) — основной номер счёта, структура которого зависит от страны

Пример IBAN:

GB29NWBK60161331926819
DE89 3704 0044 0532 0130 00
FR14 2004 1010 0505 0001 3M02 606

Особенности формата:

  • длина варьируется от 15 до 34 символов;
  • допускаются только латинские буквы и цифры;
  • в отображении часто используется группировка по 4 символа для удобства чтения;
  • пробелы не являются частью значения, но используются для визуального форматирования.

Подключение и базовая инициализация Inputmask IBAN

В Inputmask IBAN реализован как встроенный alias, что позволяет использовать его без ручного описания шаблона.

Базовый пример

import Inputmask from "inputmask";

const element = document.querySelector("#iban");

Inputmask({
  alias: "iban"
}).mask(element);

В этом режиме библиотека:

  • автоматически определяет допустимые символы;
  • форматирует ввод по группам;
  • учитывает структуру IBAN разных стран;
  • ограничивает ввод недопустимых символов.

Поведение маски IBAN при вводе

При использовании alias "iban" Inputmask выполняет:

  • приведение ввода к верхнему регистру;
  • фильтрацию символов (только A–Z и 0–9);
  • автоматическую группировку (обычно по 4 символа);
  • контроль допустимой длины;
  • частичную структурную валидацию.

Пример поведения:

Ввод:

de89370400440532013000

Отображение:

DE89 3704 0044 0532 0130 00

Основные настройки IBAN маски

Inputmask позволяет управлять поведением IBAN через параметры конфигурации.

alias

Определяет использование встроенного шаблона:

alias: "iban"

country

Позволяет ограничить формат конкретной страной:

Inputmask({
  alias: "iban",
  country: "DE"
}).mask("#iban");

В этом случае маска будет учитывать длину и структуру немецкого IBAN.

placeholder

Управляет отображением шаблонных символов:

Inputmask({
  alias: "iban",
  placeholder: " "
}).mask("#iban");

autoUnmask

Определяет, будет ли возвращаться «чистое» значение без форматирования:

Inputmask({
  alias: "iban",
  autoUnmask: true
}).mask("#iban");

При получении значения:

const value = element.inputmask.unmaskedvalue();

showMaskOnHover / showMaskOnFocus

Управляют отображением маски:

Inputmask({
  alias: "iban",
  showMaskOnFocus: true,
  showMaskOnHover: false
}).mask("#iban");

Проверка корректности IBAN

Inputmask обеспечивает структурную корректность ввода, но не всегда выполняет полный алгоритм проверки контрольной суммы (mod 97). Поэтому различают два уровня проверки:

1. Форматная валидация

Проверяет:

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

2. Логическая валидация (checksum mod 97)

Алгоритм IBAN:

  1. Переместить первые 4 символа в конец строки.
  2. Заменить буквы на числа (A=10, B=11, …, Z=35).
  3. Выполнить вычисление по модулю 97.
  4. Результат должен быть равен 1.

Inputmask сам по себе не всегда выполняет этот шаг, поэтому часто используется внешняя проверка:

function validateIBAN(iban) {
  const rearranged = iban.slice(4) + iban.slice(0, 4);
  const numeric = rearranged.replace(/[A-Z]/g, ch =>
    ch.charCodeAt(0) - 55
  );

  let remainder = numeric;
  while (remainder.length > 2) {
    const block = remainder.slice(0, 9);
    remainder = (parseInt(block, 10) % 97).toString() + remainder.slice(block.length);
  }

  return parseInt(remainder, 10) % 97 === 1;
}

События Inputmask при работе с IBAN

oncomplete

Срабатывает, когда введено полное значение IBAN:

Inputmask({
  alias: "iban",
  oncomplete: function () {
    console.log("IBAN введён полностью");
  }
}).mask("#iban");

onincomplete

Срабатывает при потере фокуса, если значение не завершено:

Inputmask({
  alias: "iban",
  onincomplete: function () {
    console.log("IBAN введён не полностью");
  }
}).mask("#iban");

oncleared

Срабатывает при очистке поля:

Inputmask({
  alias: "iban",
  oncleared: function () {
    console.log("Поле IBAN очищено");
  }
}).mask("#iban");

Работа с неформатированным значением

Inputmask сохраняет два представления данных:

  • форматированное значение (с пробелами)
  • чистое значение (без пробелов и маски)

Получение чистого значения:

const input = document.querySelector("#iban");
const raw = input.inputmask.unmaskedvalue();

Получение отображаемого значения:

const value = input.value;

Программная установка IBAN

setValue через Inputmask

const input = document.querySelector("#iban");

input.inputmask.setValue("DE89370400440532013000");

При этом значение автоматически форматируется:

DE89 3704 0044 0532 0130 00

Очистка и удаление маски

Очистка значения

input.inputmask.setValue("");

Полное удаление маски

input.inputmask.remove();

После удаления поле становится обычным input без ограничений.

Кастомизация IBAN маски

В случаях, когда встроенный alias недостаточен, используется расширение конфигурации.

Пример кастомного IBAN alias

Inputmask.extendAliases({
  customIBAN: {
    alias: "iban",
    country: "FR",
    greedy: false,
    autoUnmask: true,
    definitions: {
      "a": {
        validator: "[A-Za-z]"
      },
      "9": {
        validator: "[0-9]"
      }
    }
  }
});

Использование:

Inputmask({
  alias: "customIBAN"
}).mask("#iban");

Особенности интеграции с формами

При использовании IBAN в формах важно учитывать:

  • серверная валидация обязательна, так как клиентская может быть неполной;
  • значение лучше отправлять в «сыром» формате без пробелов;
  • автозаполнение браузера может конфликтовать с маской;
  • рекомендуется использовать autoUnmask при отправке формы.

Пример отправки:

form.addEventListener("submit", (e) => {
  const iban = input.inputmask.unmaskedvalue();
  console.log("Отправка IBAN:", iban);
});

Типичные ошибки при использовании IBAN маски

  • использование маски без учёта country → некорректная длина;
  • попытка полной валидации только через Inputmask;
  • отправка форматированного значения с пробелами на сервер;
  • отсутствие обработки uppercase (хотя Inputmask частично решает это автоматически);
  • конфликт с autocomplete браузера.

Поведение в различных сценариях ввода

Вставка из буфера обмена

Inputmask автоматически:

  • очищает лишние символы;
  • приводит к верхнему регистру;
  • применяет форматирование.

Постепенный ввод

При наборе символов:

  • маска динамически перестраивается;
  • пробелы добавляются автоматически;
  • курсор корректируется при вставках.

Неполный ввод

Если IBAN не завершён:

  • поле считается incomplete;
  • onincomplete событие может быть использовано для блокировки отправки формы.

Работа с несколькими странами

Inputmask IBAN поддерживает различные страны через внутренний справочник:

  • DE — Германия
  • FR — Франция
  • GB — Великобритания
  • ES — Испания
  • IT — Италия

Каждая страна имеет:

  • собственную длину IBAN;
  • структуру BBAN;
  • правила проверки.

При указании country маска становится строго типизированной под конкретный формат.

Оглавление