Предустановленные форматы по регионам

Cleave.js предоставляет механизм форматирования ввода данных на основе предустановленных правил, которые могут адаптироваться под региональные особенности: числовые разряды, десятичные разделители, телефонные коды, шаблоны дат и валютные представления. Архитектура библиотеки построена так, чтобы форматирование применялось декларативно через конфигурацию, что позволяет создавать наборы «локалей» поверх базовых опций.

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

В Cleave.js управление числовым форматом осуществляется через набор параметров:

  • numeral
  • numeralThousandsGroupStyle
  • numeralDecimalMark
  • delimiter

Разделители и десятичные знаки

В европейских локалях часто используется запятая как десятичный разделитель, тогда как в англоязычных регионах применяется точка. Это поведение задаётся через:

new Cleave(input, {
  numeral: true,
  numeralDecimalMark: ',',
  delimiter: ' '
});

В данном случае дробная часть отделяется запятой, а тысячные группы — пробелом.

Для США характерна обратная конфигурация:

new Cleave(input, {
  numeral: true,
  numeralDecimalMark: '.',
  delimiter: ','
});

Группировка разрядов

Cleave.js поддерживает несколько стратегий группировки:

  • thousand — стандартная западная система (1,000,000)
  • lakh — индийская система (10,00,000)
  • wan — восточноазиатская система (1,0000,0000)

Пример индийского формата:

new Cleave(input, {
  numeral: true,
  numeralThousandsGroupStyle: 'lakh'
});

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

Предустановки валютных форматов

Хотя Cleave.js не является полноценной финансовой библиотекой, он позволяет имитировать валютные поля через комбинацию prefix, numeral и разделителей.

Символ валюты как префикс

new Cleave(input, {
  numeral: true,
  prefix: '€ ',
  numeralDecimalMark: ',',
  delimiter: ' '
});

Для долларовой локали:

new Cleave(input, {
  numeral: true,
  prefix: '$ ',
  numeralDecimalMark: '.',
  delimiter: ','
});

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

Региональные валютные шаблоны

На практике часто создаются конфигурационные маппинги:

const currencyLocales = {
  US: {
    prefix: '$ ',
    decimal: '.',
    delimiter: ','
  },
  FR: {
    prefix: '€ ',
    decimal: ',',
    delimiter: ' '
  },
  KZ: {
    prefix: '₸ ',
    decimal: ',',
    delimiter: ' '
  }
};

И применение:

const locale = currencyLocales['FR'];

new Cleave(input, {
  numeral: true,
  prefix: locale.prefix,
  numeralDecimalMark: locale.decimal,
  delimiter: locale.delimiter
});

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

Телефонные форматы по регионам

Телефонный модуль Cleave.js ориентирован на региональные маски, которые определяются через phoneRegionCode. Этот параметр задаёт базовый шаблон, соответствующий стране.

new Cleave(input, {
  phone: true,
  phoneRegionCode: 'US'
});

Для Великобритании:

new Cleave(input, {
  phone: true,
  phoneRegionCode: 'GB'
});

Для Казахстана:

new Cleave(input, {
  phone: true,
  phoneRegionCode: 'KZ'
});

Телефонные форматы в Cleave.js опираются на внутренние маски, где определяются:

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

Ограничения региональных масок

Телефонные шаблоны не являются динамическими на уровне валидации операторов связи. Они представляют собой только структурное форматирование. Это означает, что:

  • корректный формат не гарантирует существование номера
  • некоторые страны имеют схожие маски, что может приводить к пересечению форматов

Форматы дат и календарные локали

Cleave.js поддерживает форматирование дат через date: true и шаблон datePattern. Региональные различия здесь выражаются в порядке компонентов даты.

Европейский формат (день-месяц-год)

new Cleave(input, {
  date: true,
  datePattern: ['d', 'm', 'Y'],
  delimiter: '.'
});

Результат: 31.12.2026

Американский формат (месяц-день-год)

new Cleave(input, {
  date: true,
  datePattern: ['m', 'd', 'Y'],
  delimiter: '/'
});

Результат: 12/31/2026

Международный ISO-подобный вариант

new Cleave(input, {
  date: true,
  datePattern: ['Y', 'm', 'd'],
  delimiter: '-'
});

Результат: 2026-12-31

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

Стратегии построения локалей поверх Cleave.js

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

Базовая структура локали

const localePreset = {
  numeral: {
    decimalMark: ',',
    delimiter: ' ',
    groupStyle: 'thousand'
  },
  currency: {
    prefix: '€ ',
    decimalMark: ',',
    delimiter: ' '
  },
  date: {
    pattern: ['d', 'm', 'Y'],
    delimiter: '.'
  },
  phone: {
    region: 'FR'
  }
};

Фабрика инстансов

function createCleave(type, input, locale) {
  if (type === 'currency') {
    return new Cleave(input, {
      numeral: true,
      prefix: locale.currency.prefix,
      numeralDecimalMark: locale.currency.decimalMark,
      delimiter: locale.currency.delimiter
    });
  }

  if (type === 'date') {
    return new Cleave(input, {
      date: true,
      datePattern: locale.date.pattern,
      delimiter: locale.date.delimiter
    });
  }

  if (type === 'phone') {
    return new Cleave(input, {
      phone: true,
      phoneRegionCode: locale.phone.region
    });
  }

  if (type === 'numeral') {
    return new Cleave(input, {
      numeral: true,
      numeralDecimalMark: locale.numeral.decimalMark,
      numeralThousandsGroupStyle: locale.numeral.groupStyle,
      delimiter: locale.numeral.delimiter
    });
  }
}

Такой подход позволяет централизованно переключать региональные форматы без изменения логики UI.

Динамическое переключение локали

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

let cleaveInstance;

function setLocale(type, input, locale) {
  if (cleaveInstance) {
    cleaveInstance.destroy();
  }

  cleaveInstance = createCleave(type, input, locale);
}

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

Комбинирование региональных правил

В реальных системах редко используется чистая локаль. Обычно применяется гибрид:

  • числовой формат — один регион
  • валюта — другой стандарт (например, USD глобально)
  • дата — локальная
  • телефон — страна пользователя

Пример смешанной конфигурации:

const mixedLocale = {
  numeral: 'EU',
  currency: 'USD',
  date: 'ISO',
  phone: 'KZ'
};

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

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

Региональные предустановки в Cleave.js требуют учёта нескольких технических нюансов:

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

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

Оглавление