Ограничение диапазона значений

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

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

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

Ключевыми сущностями выступают:

  • минимальное значение (нижняя граница диапазона)
  • максимальное значение (верхняя граница диапазона)
  • промежуточная валидация при вводе символов
  • финальная нормализация значения

Числовые алиасы и поддержка диапазонов

Механизм диапазонов в Inputmask чаще всего используется совместно с числовыми алиасами:

  • numeric
  • integer
  • decimal

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

Пример базовой конфигурации:

Inputmask({
  alias: "numeric",
  min: 10,
  max: 100
}).mask(input);

В данной конфигурации маска ограничивает ввод значений диапазоном от 10 до 100. При этом контроль осуществляется не только после завершения ввода, но и в процессе набора.

Параметры min и max

Параметры min и max являются основными инструментами ограничения диапазона.

min

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

max

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

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

Пример:

Inputmask({
  alias: "integer",
  min: 0,
  max: 999
}).mask(input);

Здесь допустимы значения от 0 до 999, включая промежуточные состояния вроде пустой строки или частично введённого числа.

Поведение при вводе значений вне диапазона

Контроль диапазона в Inputmask не является мгновенным запретом каждого символа. Вместо этого применяется стратегия постепенной валидации:

  1. Пользователь вводит символ
  2. Формируется промежуточное значение
  3. Выполняется проверка на соответствие диапазону
  4. При необходимости значение корректируется или отклоняется

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

Ограничение диапазона с дробными числами

При использовании decimal алиаса диапазоны работают совместно с параметром digits, который определяет точность дробной части.

Inputmask({
  alias: "decimal",
  min: 0.5,
  max: 10.75,
  digits: 2,
  radixPoint: "."
}).mask(input);

В этом случае контроль диапазона усложняется из-за необходимости учитывать:

  • позицию десятичного разделителя
  • количество допустимых знаков после запятой
  • промежуточные состояния (например, ввод “10.”)

Во время ввода Inputmask допускает частично сформированные числа, но при потере фокуса или завершении ввода выполняется строгая проверка границ.

Нормализация значения при выходе за диапазон

Если итоговое значение выходит за пределы допустимого диапазона, возможны три стратегии обработки:

  • корректировка до ближайшей границы (min или max)
  • отклонение значения с возвратом предыдущего валидного состояния
  • пометка значения как невалидного без изменения

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

Пример корректировки:

Inputmask({
  alias: "numeric",
  min: 100,
  max: 500,
  autoUnmask: true
}).mask(input);

При вводе значения 600 система может автоматически привести его к 500.

Влияние postValidation и preValidation на диапазоны

Механизм диапазонов тесно связан с хуками валидации:

  • preValidation — проверка до применения символа
  • postValidation — проверка после формирования значения

Диапазонная логика чаще всего реализуется на этапе postValidation, поскольку для корректного сравнения необходимо собрать полное числовое значение.

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

Inputmask({
  alias: "numeric",
  min: 0,
  max: 100,
  postValidation: function (buffer, opts, currentResult) {
    const value = parseFloat(buffer.join(""));
    if (value > opts.max) return false;
    if (value < opts.min) return false;
    return currentResult;
  }
}).mask(input);

Работа с isValid при ограничении диапазона

Функция isValid учитывает диапазонные ограничения как часть общей проверки маски.

При вызове:

const mask = Inputmask({
  alias: "integer",
  min: 1,
  max: 10
});

mask.mask(input);

mask.isValid("15");

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

При этом важно учитывать, что isValid оценивает уже сформированное значение, а не промежуточные состояния ввода.

Частичные значения и диапазонная логика

Одной из сложностей реализации диапазонного контроля является обработка незавершённых чисел. Например:

  • ввод “-” при отрицательных диапазонах
  • ввод “1” при диапазоне 10–99
  • ввод “0.” в десятичных числах

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

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

Ограничение диапазона в валютных масках

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

Inputmask({
  alias: "currency",
  prefix: "$ ",
  groupSeparator: ",",
  digits: 2,
  min: 10,
  max: 10000
}).mask(input);

Здесь диапазон применяется к числовой части, игнорируя визуальные элементы форматирования:

  • префикс валюты
  • разделители тысяч
  • формат дробной части

Фактическая проверка выполняется на «чистом» числе без форматирования.

Комбинация диапазона с обязательными правилами ввода

Диапазонные ограничения часто комбинируются с другими правилами:

  • обязательное заполнение поля
  • фиксированное количество цифр
  • запрет ведущих нулей
  • ограничение знака числа

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

Inputmask({
  alias: "integer",
  min: 100,
  max: 999,
  allowMinus: false,
  placeholder: "0"
}).mask(input);

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

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

При установке значения программно через API маски диапазонная проверка также применяется:

const im = Inputmask({
  alias: "numeric",
  min: 5,
  max: 50
}).mask(input);

input.value = "100";
im.setValue(input, "100");

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

Оглавление