Квантификаторы в масках

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

Без квантификаторов маски быстро становятся громоздкими:

Inputmask("9999999999").mask("#phone");

С квантификаторами тот же результат записывается значительно компактнее:

Inputmask("9{10}").mask("#phone");

Квантификаторы особенно полезны при работе с:

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

Базовый синтаксис

В Inputmask используются фигурные скобки:

{n}
{n,m}
{n|}

Где:

  • n — минимальное количество повторений;
  • m — максимальное количество повторений;
  • | — специальная форма для динамического ввода.

Фиксированное количество повторений

Синтаксис

9{4}

Означает:

ровно 4 цифры

Пример

Inputmask("9{4}").mask("#code");

Допустимые значения:

1234
5678
0001

Недопустимые:

123
12345

Квантификаторы для букв

Квантификаторы работают не только с цифрами, но и с любыми определителями маски.

Пример

Inputmask("a{5}").mask("#letters");

Требуется ровно 5 букв.

Допустимо:

hello
world

Недопустимо:

abc
abcdef

Повторение буквенно-цифровых символов

Пример

Inputmask("*{8}").mask("#token");

Здесь:

  • * — любой буквенно-цифровой символ;
  • {8} — повторение 8 раз.

Подходит для:

  • PIN-кодов;
  • токенов;
  • коротких идентификаторов.

Минимальное и максимальное количество

Синтаксис

{min,max}

Пример

Inputmask("9{2,5}").mask("#number");

Разрешает:

12
123
1234
12345

Не разрешает:

1
123456

Поведение при вводе

При использовании диапазона Inputmask позволяет постепенно расширять ввод.

Например:

Inputmask("9{2,5}").mask("#input");

Пользователь может остановиться на:

12

или продолжить до:

12345

Квантификаторы и необязательные части

Квантификаторы можно комбинировать с необязательными секциями.

Пример

Inputmask("(9){1,3}").mask("#test");

Возможны варианты:

1
12
123

Повторение групп

Квантификаторы могут применяться к целым группам.

Пример

Inputmask("(99-){3}99").mask("#serial");

Результат:

12-34-56-78

Здесь группа:

99-

повторяется три раза.

Квантификаторы с альтернативами

Пример

Inputmask("(99|AAA){2}").mask("#mixed");

Каждое повторение может принимать один из вариантов:

  • две цифры;
  • три буквы.

Возможные значения:

12ABC
ABC34
1212
ABCABC

Динамические квантификаторы

Синтаксис

{n|}

Это особый режим динамического повторения.

Пример

Inputmask("9{1|1,10}").mask("#dynamic");

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

Отличие {1,10} от {1|1,10}

Обычный диапазон

9{1,10}

Inputmask сразу строит маску на весь диапазон.

Динамический диапазон

9{1|1,10}

Маска расширяется по мере ввода.

Это особенно важно для:

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

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

Inputmask({
    mask: "9{1|1,15}",
    greedy: false
}).mask("#amount");

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

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

Параметр greedy

Квантификаторы тесно связаны с параметром greedy.

greedy: true

Inputmask({
    mask: "9{1,10}",
    greedy: true
}).mask("#input");

Полная маска отображается сразу.

greedy: false

Inputmask({
    mask: "9{1,10}",
    greedy: false
}).mask("#input");

Маска раскрывается постепенно.

Влияние greedy на UX

Жадный режим

__________

Пользователь видит все позиции сразу.

Подходит для:

  • фиксированных номеров;
  • ИИН;
  • БИН;
  • банковских карт.

Нежадный режим

Показываются только реально введённые символы.

Подходит для:

  • переменной длины;
  • денежных значений;
  • необязательных частей.

Квантификаторы внутри пользовательских определений

Пример

Inputmask({
    definitions: {
        "H": {
            validator: "[A-F0-9]"
        }
    },
    mask: "H{8}"
}).mask("#hex");

Разрешены HEX-символы:

A1B2C3D4

Повторение сложных блоков

Пример MAC-адреса

Без квантификаторов:

"HH:HH:HH:HH:HH:HH"

С группировкой:

"(HH:){5}HH"

Полный пример:

Inputmask({
    definitions: {
        "H": {
            validator: "[A-Fa-f0-9]"
        }
    },
    mask: "(HH:){5}HH"
}).mask("#mac");

Квантификаторы в телефонных масках

Пример

Inputmask("+7 (999) 9{2,7}").mask("#phone");

Позволяет задавать переменную длину локального номера.

Комбинация с optional-блоками

Пример

Inputmask("+7 (999) 999[-99][-99]").mask("#phone");

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

Повторение разделителей

Пример даты

Inputmask("(99/){2}9999").mask("#date");

Результат:

12/05/2025

Квантификаторы и regex-маски

При использовании regex квантификаторы работают уже по правилам регулярных выражений.

Пример

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

Здесь:

{4}

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

Различие между mask-квантификаторами и regex-квантификаторами

В обычной маске

mask: "9{4}"

Квантификатор относится к токену Inputmask.

В regex

regex: "\\d{4}"

Квантификатор относится к синтаксису RegExp.

Это два разных механизма.

Вложенные группы

Пример

Inputmask("((99)-){2}AAA").mask("#complex");

Результат:

12-34-ABC

Ограничения вложенности

Слишком сложные вложенные конструкции:

((9{1,3}|AA){2,5}[-]){1,4}

могут:

  • ухудшать производительность;
  • усложнять сопровождение;
  • вызывать неоднозначное поведение курсора.

Для сложных сценариев лучше использовать:

  • aliases;
  • regex;
  • preprocess/postprocess;
  • кастомные валидаторы.

Производительность

Большие диапазоны:

9{1,1000}

могут создавать проблемы:

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

Особенно в сочетании с:

  • alternator;
  • nested groups;
  • greedy=false.

Практика ограничения диапазонов

Лучше:

9{1,20}

чем:

9{1,999}

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

Квантификаторы и очистка значения

Пример

Inputmask({
    mask: "9{4,8}",
    clearIncomplete: true
}).mask("#input");

Если введено меньше минимального количества символов, значение очищается.

Поведение с nullable

Пример

Inputmask({
    mask: "9{2,5}",
    nullable: true
}).mask("#input");

Пустое значение остаётся null, а не строкой маски.

Работа курсора

Квантификаторы влияют на:

  • перемещение caret;
  • обработку Backspace;
  • insertMode;
  • overwriteMode.

Особенно это заметно при:

greedy: false

и динамическом расширении маски.

Частые ошибки

Ошибка: слишком широкий диапазон

9{1,9999}

Плохо для производительности.

Ошибка: сложные вложенные конструкции

((9|a){1,5}-){1,10}

Трудно поддерживать и отлаживать.

Ошибка: использование regex-синтаксиса в обычной маске

Неправильно:

mask: "\\d{4}"

Правильно:

mask: "9{4}"

Сравнение подходов

Без квантификаторов

9999999999

Минусы:

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

С квантификаторами

9{10}

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

  • компактность;
  • гибкость;
  • простота модификации.

Практические сценарии

SMS-код

Inputmask("9{6}").mask("#sms");

Серийный номер

Inputmask("(AAA-){3}9999").mask("#serial");

IPv4-фрагменты

Inputmask("9{1,3}.9{1,3}.9{1,3}.9{1,3}").mask("#ip");

Переменный номер документа

Inputmask("A{2}9{4,8}").mask("#doc");

Совместное использование с alias

Пример

Inputmask({
    alias: "numeric",
    mask: "9{1,12}"
}).mask("#amount");

Отладка сложных масок

Для диагностики удобно:

  • временно отключать greedy;
  • упрощать вложенность;
  • тестировать группы отдельно;
  • избегать длинных alternator-цепочек.

Рекомендации по проектированию

Использовать группы

Лучше:

(99-){3}99

чем:

99-99-99-99

Ограничивать диапазоны

Лучше:

{1,10}

чем:

{1,1000}

Избегать чрезмерной динамики

Слишком большое количество:

  • alternator;
  • optional;
  • quantifier;
  • nested group;

в одной маске ухудшает UX.

Внутренний механизм работы

Inputmask преобразует квантификаторы во внутренние повторяющиеся токены. При вводе библиотека:

  1. анализирует структуру маски;
  2. создаёт дерево токенов;
  3. применяет правила повторения;
  4. управляет позицией курсора;
  5. проверяет валидность очередного символа.

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

Оглавление