Почтовые индексы разных стран

Inputmask применяется для ограничения и форматирования пользовательского ввода на уровне поля формы, обеспечивая соответствие заранее заданным шаблонам. Почтовые индексы являются одним из наиболее типичных сценариев использования масок, поскольку почти каждая страна использует строго определённый формат: фиксированную длину, сочетание цифр и букв, иногда с разделителями.

Почтовый индекс в контексте Inputmask представляет собой комбинацию:

  • фиксированных цифровых блоков
  • опциональных сегментов
  • буквенно-цифровых шаблонов
  • строгих или гибких регулярных выражений

В Inputmask используются два основных подхода:

  • маска (mask) — структурированный шаблон
  • regex-режим (regex) — полная свобода через регулярное выражение

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

Базовые символы маски

Система масок использует специальные символы:

  • 9 — обязательная цифра (0–9)
  • a — обязательная буква (A–Z, a–z)
  • * — буква или цифра
  • [] — необязательные блоки
  • {} — повторения
  • | — альтернативные маски

Дополнительно часто используются настройки:

  • definitions — кастомные символы
  • placeholder — отображаемый шаблон
  • showMaskOnHover — отображение маски при наведении
  • autoUnmask — извлечение «чистого» значения

Почтовый индекс США (ZIP и ZIP+4)

Формат:

  • 12345
  • 12345-6789

Маска:

Inputmask({
  mask: "99999[-9999]"
}).mask("#zip");

Особенности:

  • [-9999] делает расширение ZIP+4 необязательным
  • дефис фиксированный
  • строгая цифровая структура

Для более строгой версии через regex:

Inputmask({
  regex: "\\d{5}(-\\d{4})?"
}).mask("#zip");

Почтовый индекс Германии (PLZ)

Формат:

  • 12345

Особенности: строго 5 цифр, без разделителей.

Inputmask({
  mask: "99999"
}).mask("#plz");

Валидационная строгость достигается простотой шаблона: любое отклонение блокируется.

Почтовый индекс Франции

Формат:

  • 75001
  • 5 цифр
Inputmask({
  mask: "99999"
}).mask("#fr_zip");

Несмотря на идентичность с немецким форматом, различие проявляется на уровне бизнес-логики (например, диапазоны регионов).

Почтовый индекс Великобритании (UK postcode)

Один из самых сложных форматов.

Примеры:

  • EC1A 1BB
  • W1A 0AX
  • M1 1AE

Используется буквенно-цифровая структура с пробелом.

Через regex:

Inputmask({
  regex: "([A-Z]{1,2}[0-9][0-9A-Z]?)\\s?[0-9][A-Z]{2}",
  casing: "upper"
}).mask("#uk_postcode");

Ключевые моменты:

  • обязательное приведение к верхнему регистру
  • пробел может быть опциональным
  • сложная структура требует regex вместо mask

Канадский почтовый индекс

Формат:

  • A1A 1A1

Чередование букв и цифр:

Inputmask({
  mask: "a9a 9a9",
  casing: "upper"
}).mask("#ca_postal");

Особенности:

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

Почтовый индекс Казахстана

Формат:

  • 100000 (6 цифр)
Inputmask({
  mask: "999999"
}).mask("#kz_postal");

Особенности:

  • фиксированная длина
  • только цифры
  • отсутствие разделителей

Универсальная модель с выбором страны

В системах с мультистраничными адресами маска часто переключается динамически.

Пример:

const masks = {
  us: "99999[-9999]",
  de: "99999",
  fr: "99999",
  kz: "999999",
  ca: "a9a 9a9"
};

function setCountry(country) {
  Inputmask({
    mask: masks[country],
    casing: "upper"
  }).mask("#postal");
}

Такой подход позволяет:

  • централизовать логику
  • минимизировать ошибки ввода
  • адаптировать UI без перезагрузки формы

Использование definitions для кастомных правил

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

Inputmask({
  mask: "99999",
  definitions: {
    "5": {
      validator: "[0-5]"
    }
  }
}).mask("#custom_zip");

Хотя для почтовых индексов это используется редко, подобная настройка полезна для региональных ограничений.

Regex-режим против mask-режима

Mask-режим

Преимущества:

  • простота
  • высокая производительность
  • визуальная предсказуемость

Недостатки:

  • ограниченная гибкость

Regex-режим

Преимущества:

  • поддержка сложных форматов (UK, NL, BR)
  • точная валидация

Недостатки:

  • сложность сопровождения
  • менее очевидное поведение маски

Настройки поведения ввода

В контексте почтовых индексов часто применяются дополнительные параметры:

Inputmask({
  mask: "99999",
  placeholder: " ",
  showMaskOnHover: false,
  showMaskOnFocus: true,
  clearIncomplete: true,
  autoUnmask: true
}).mask("#zip");

Ключевые эффекты:

  • clearIncomplete — предотвращает сохранение неполного индекса
  • autoUnmask — возвращает чистое значение без маски
  • placeholder — уменьшает визуальный шум

Обработка форм и отправка данных

При отправке формы важно учитывать разницу между отображаемым и реальным значением.

const el = document.querySelector("#zip");
const value = el.inputmask.unmaskedvalue();

Это критично для:

  • серверной валидации
  • хранения в базе данных
  • интеграции с API

Комбинированные сценарии с адресами

В сложных формах почтовый индекс зависит от выбранной страны:

countrySelect.addEventListener("change", (e) => {
  const country = e.target.value;

  const mask = {
    us: "99999[-9999]",
    uk: null, // regex
  };

  if (country === "uk") {
    Inputmask({
      regex: "([A-Z]{1,2}[0-9][0-9A-Z]?)\\s?[0-9][A-Z]{2}",
      casing: "upper"
    }).mask("#postal");
  } else {
    Inputmask({
      mask: mask[country]
    }).mask("#postal");
  }
});

Такая динамика обеспечивает корректность ввода в международных системах доставки.

Ошибки проектирования масок почтовых индексов

Типичные проблемы:

  • использование слишком строгой маски там, где возможны вариации
  • отсутствие поддержки пробелов (UK, CA)
  • игнорирование регистра символов
  • попытка заменить regex сложной mask-структурой
  • отсутствие адаптации под страну

Практическая модель проектирования

При проектировании масок почтовых индексов в Inputmask применяется принцип уровней:

  1. Базовый формат (mask)
  2. Региональные исключения (regex)
  3. Бизнес-валидация (сервер)
  4. Динамическая адаптация UI

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

Оглавление