В библиотеке Inputmask базовый паттерн представляет собой строковое описание структуры ввода, где каждый символ маски определяет допустимый тип данных на соответствующей позиции. Маска задаёт жёсткую или полу-жёсткую структуру поля ввода, ограничивая пользователя в формате и одновременно обеспечивая предсказуемость данных.
Ключевая концепция — соответствие каждого символа маски определённому правилу:
Маска применяется к input-полю и начинает контролировать ввод в режиме реального времени.
Базовый набор символов Inputmask формирует фундамент большинства сценариев ввода.
9 — обязательная цифра
Символ 9 обозначает позицию, в которую допускается ввод
только цифры (0–9). Символ является необязательным в том смысле, что
поле может оставаться пустым, если не задано required.
Пример маски:
9999
Поведение:
123412a40 — обязательная цифра с принудительным заполнением
Символ 0 аналогичен 9, но в ряде
конфигураций используется как более строгая позиция, где значение должно
быть заполнено при завершении ввода.
Пример:
0000
Типичный сценарий — фиксированное количество разрядов, например PIN-коды.
a — буква (латиница и/или локализованные алфавиты)
Символ a допускает ввод только буквенных символов.
Пример:
aaaa
Допустимо:
testAbCdНедопустимо:
1234*** — любой символ (буква или цифра)**
Символ * расширяет диапазон допустимых значений,
позволяя вводить как буквы, так и цифры.
Пример:
****-****
Допустимо:
A1B2-C3D41234-ABCDЛюбые символы, не являющиеся управляющими, трактуются как фиксированные значения. Они автоматически подставляются в поле и становятся частью формата.
Пример:
+7 (999) 999-99-99
Здесь:
+, пробелы, скобки и дефисы — литералы9 — динамические позицииОсобенность литералов заключается в том, что они не могут быть изменены пользователем и служат структурными разделителями.
Каждая позиция маски может отображаться в виде placeholder — визуального индикатора ожидаемого типа данных.
Пример:
Mask: 9999-99-99
Placeholder: YYYY-MM-DD (визуально настраивается)
Inputmask позволяет задавать символ заполнителя через конфигурацию
placeholder, что усиливает читаемость формы и снижает
вероятность ошибок ввода.
Базовые паттерны тесно связаны с обработкой пустых и частично заполненных значений.
Основные режимы:
При использовании базовых паттернов важно учитывать, что незаполненные позиции могут интерпретироваться как пустые символы или игнорироваться при сериализации значения.
Базовые паттерны поддерживают повторение символов через фигурные скобки.
Примеры:
9{4}
эквивалентно:
9999
Диапазон повторений:
9{1,4}
означает от одной до четырёх цифр.
Повторение применяется ко всем стандартным символам:
9{n}a{n}*{n}Некоторые паттерны допускают альтернативные варианты заполнения.
Символ ? используется для обозначения необязательной
части маски:
(999) 999-9999[9]
или в более явной форме через опциональные сегменты:
9999?-9999
Опциональные части позволяют создавать гибкие форматы, где часть данных может отсутствовать без нарушения структуры.
Для повышения читаемости маски используются логические группы.
Пример:
999-999-9999
или
(999) 999 9999
Группировка не влияет на валидность, но влияет на UX и визуальное восприятие структуры данных.
Базовые паттерны расширяются через механизм definitions,
позволяющий переопределять или добавлять новые типы символов.
Пример:
Inputmask({
mask: "hh:mm",
definitions: {
"h": {
validator: "[0-2]",
cardinality: 1
}
}
}).mask(input);
В этом случае символ h ограничивает ввод значениями
0–2.
Параметры определения:
Фиксированные паттерны не допускают вариативности и используются для строго формализованных данных.
Примеры:
телефон:
+7 (999) 999-99-99дата:
99/99/9999индекс:
999999Особенность таких масок — полное отсутствие опциональных сегментов.
Некоторые базовые паттерны допускают частично свободный ввод, где структура задаётся, но часть символов может быть пропущена.
Пример:
9999[-9999]
Здесь вторая группа необязательна, но при вводе активируется автоматически.
Inputmask поддерживает конструкции, где один блок повторяется несколько раз.
Пример:
(9999)*{1,3}
Такая запись означает повторение группы до трёх раз.
Используется для:
Базовые маски часто комбинируют разные типы символов:
aa-9999-***
Структура:
aa — буквенный префикс9999 — числовой блок*** — свободный блокТакие комбинации позволяют описывать сложные форматы без написания кастомной логики.
При вставке (paste) Inputmask анализирует строку целиком и пытается сопоставить её с паттерном.
Алгоритм:
Если вставка не соответствует базовому паттерну, часть символов отбрасывается без ошибки.
Базовые паттерны работают в двух режимах:
Пример:
+7 (999) 123-45-67
Сырое значение:
79991234567
Это разделение критично для серверной обработки данных.
Некоторые сценарии требуют учёта нестандартного поведения:
В таких случаях базовый паттерн становится частью более сложной системы правил, но сохраняет роль первичного фильтра ввода.
При разборе паттерна используется строгий порядок интерпретации:
9, a,
*)Такой порядок исключает неоднозначность и обеспечивает стабильное поведение при изменении конфигурации.