Санитизация ввода

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

Роль Inputmask в процессе санитизации

Библиотека Inputmask реализует санитарную обработку данных через несколько слоёв:

  • фильтрация символов при вводе;
  • преобразование значений в соответствии с маской;
  • контроль вставки (paste);
  • нормализация перед установкой значения;
  • извлечение «чистого» значения без форматирования.

Ключевой принцип заключается в том, что недопустимые символы не просто удаляются постфактум, а предотвращаются на этапе ввода.

Базовая фильтрация символов

Маска определяет допустимые символы через шаблон и специальные токены:

  • 9 — цифра
  • a — буква
  • * — буква или цифра

Например:

Inputmask("999-999").mask(input);

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

Использование definitions для расширенной фильтрации

Механизм definitions позволяет переопределить правила допустимых символов, расширяя модель санитизации до произвольной логики.

Inputmask({
  mask: "****-****",
  definitions: {
    "*": {
      validator: "[A-F0-9]",
      casing: "upper"
    }
  }
}).mask(input);

Здесь санитизация включает:

  • ограничение допустимого диапазона символов (шестнадцатеричный набор);
  • автоматическую нормализацию регистра;
  • блокировку всех остальных символов на этапе ввода.

Преобразование данных через onBeforeMask

Санитизация часто начинается до применения маски. Хук onBeforeMask позволяет нормализовать входную строку до обработки.

Inputmask({
  mask: "+7 (999) 999-99-99",
  onBeforeMask: function (value) {
    return value.replace(/\D/g, "");
  }
}).mask(input);

Здесь реализуется предварительная очистка:

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

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

Контроль вставки через onBeforePaste

Вставка данных является одним из основных источников «грязного» ввода. Inputmask предоставляет отдельный слой санитизации:

Inputmask({
  mask: "9999 9999 9999 9999",
  onBeforePaste: function (pastedValue) {
    return pastedValue.replace(/\s|\D/g, "");
  }
}).mask(input);

Санитизация при вставке включает:

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

Это предотвращает попадание в систему данных, не соответствующих ожидаемому формату.

Постобработка через onBeforeWrite

На этапе записи значения в поле применяется дополнительная фильтрация:

Inputmask({
  mask: "999-99-9999",
  onBeforeWrite: function (event, buffer, caretPos, opts) {
    return {
      refreshFromBuffer: true,
      buffer: buffer
    };
  }
}).mask(input);

Хотя основная цель этого хука — управление поведением курсора и буфера, он также используется для:

  • динамической коррекции введённых данных;
  • удаления некорректных символов;
  • синхронизации состояния маски.

Извлечение «чистого» значения

Санитизация не ограничивается вводом. Важный аспект — получение данных без форматирования:

input.inputmask.unmaskedvalue();

Этот метод возвращает значение:

  • без разделителей;
  • без декоративных символов;
  • в исходной логической форме.

Например, из +7 (999) 123-45-67 возвращается 79991234567.

Таким образом Inputmask разделяет:

  • отображаемое значение (masked);
  • фактическое значение (unmasked).

removeMaskOnSubmit как элемент очистки

Опция removeMaskOnSubmit влияет на итоговую сериализацию формы:

Inputmask({
  mask: "+9 (999) 999-99-99",
  removeMaskOnSubmit: true
}).mask(input);

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

  • маска удаляется;
  • остаётся только «сырое» значение;
  • уменьшается риск передачи форматированных строк в backend.

skipOptionalPartCharacter и нормализация структуры

Санитизация включает обработку неполных данных. Параметр skipOptionalPartCharacter управляет тем, как обрабатываются незаполненные сегменты:

Inputmask({
  mask: "(999) 999-9999",
  skipOptionalPartCharacter: " "
}).mask(input);

Это позволяет:

  • избегать «засорения» значений символами-заглушками;
  • формировать компактное представление данных;
  • предотвращать сохранение частично заполненных структур.

Регулярные маски как инструмент строгой санитизации

Regex-маски усиливают контроль над допустимыми значениями:

Inputmask({
  mask: new RegExp("[0-9A-Z]{6,10}")
}).mask(input);

В этом режиме:

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

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

Алиасы предоставляют готовые стратегии нормализации:

Inputmask("email").mask(input);

или

Inputmask("decimal").mask(input);

Внутри алиасов уже заложены правила:

  • допустимые символы;
  • форматирование;
  • поведение при вводе.

Это стандартизирует санитизацию для распространённых типов данных.

Удаление мусорных символов через greedy и placeholder

Параметр greedy влияет на поведение заполнения:

Inputmask({
  mask: "999-999",
  greedy: false
}).mask(input);

В связке с placeholder это влияет на:

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

Многоуровневая модель санитизации

С точки зрения архитектуры Inputmask формирует цепочку обработки:

  1. Pre-mask нормализация (onBeforeMask)
  2. Фильтрация ввода (definitions, mask tokens)
  3. Контроль вставки (onBeforePaste)
  4. Буферная коррекция (onBeforeWrite)
  5. Извлечение значения (unmaskedvalue)
  6. Финальная очистка формы (removeMaskOnSubmit)

Каждый этап устраняет отдельный класс «грязных» данных.

Ограничения клиентской санитизации

Несмотря на широкие возможности Inputmask, клиентская санитизация не является абсолютной гарантией корректности данных:

  • JavaScript может быть отключён;
  • данные могут быть отправлены минуя UI;
  • вредоносные значения могут поступить напрямую в backend.

Поэтому Inputmask рассматривается как слой предварительной нормализации, а не как механизм безопасности.

Комбинирование с серверной обработкой

В типовой архитектуре данные проходят двойную обработку:

  • на клиенте: Inputmask обеспечивает структурирование и первичную очистку;
  • на сервере: выполняется финальная валидация и санитизация.

Такое разделение снижает вероятность:

  • некорректного формата;
  • неожиданных символов;
  • несоответствия бизнес-правилам.

Поведение при частичном вводе

Inputmask различает:

  • завершённые значения;
  • частично заполненные;
  • пустые или сброшенные.

Санитизация в этом контексте включает:

  • предотвращение сохранения неполных структур (при настройке clearIncomplete);
  • удаление незаполненных сегментов;
  • приведение состояния к допустимому виду.
Inputmask({
  mask: "999-999",
  clearIncomplete: true
}).mask(input);

Итоговая модель очистки данных

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

  • допустимые символы ограничены заранее;
  • структура значения фиксирована;
  • преобразования происходят на каждом этапе жизненного цикла ввода;
  • итоговое значение может быть извлечено в чистом виде без форматирования.
Оглавление