min и max значения

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

Базовый принцип работы min и max

Параметры min и max применяются в числовых масках Inputmask и задают:

  • min — минимально допустимое значение
  • max — максимально допустимое значение

При вводе данных библиотека:

  1. анализирует текущее значение поля;
  2. проверяет его на соответствие диапазону;
  3. при необходимости корректирует ввод или блокирует выход за пределы диапазона.

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

Подключение числовой маски с диапазоном

Для активации диапазона используется конфигурация числового алиаса:

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

В данном случае поле принимает только значения от 10 до 100 включительно. Любая попытка выйти за пределы диапазона будет обработана маской.

Поведение при выходе за пределы min

Если значение становится меньше min, Inputmask реагирует в зависимости от сценария ввода:

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

Пример:

Inputmask({
  alias: "numeric",
  min: 5
}).mask("#input");

Если пользователь вводит 2, поле может автоматически изменить значение на 5 при завершении ввода.

Поведение при превышении max

Аналогично минимальному значению, параметр max ограничивает верхнюю границу:

Inputmask({
  alias: "numeric",
  max: 999
}).mask("#input");

При попытке ввода 1500 значение будет:

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

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

Наиболее распространённый сценарий — одновременное использование обеих границ:

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

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

Влияние дробных чисел на диапазон

При использовании дробных значений поведение min и max зависит от конфигурации десятичного разделителя и количества знаков после запятой.

Inputmask({
  alias: "numeric",
  min: 1.5,
  max: 9.75,
  digits: 2
}).mask("#input");

Особенности обработки:

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

Работа с отрицательными значениями

Диапазон может включать отрицательные числа:

Inputmask({
  alias: "numeric",
  min: -50,
  max: 50
}).mask("#input");

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

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

Поведение при вставке значений (paste)

При вставке текста Inputmask выполняет полную нормализацию:

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

Пример:

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

Вставка 9999 приведёт к преобразованию в 500, если включена авто-коррекция максимума.

Ограничение диапазона с учетом группировки разрядов

При включённой группировке чисел (thousands separator) диапазон продолжает работать на числовом уровне:

Inputmask({
  alias: "numeric",
  min: 1000,
  max: 1000000,
  groupSeparator: " ",
  autoGroup: true
}).mask("#input");

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

Взаимодействие min/max с шагающим вводом (step)

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

Inputmask({
  alias: "numeric",
  min: 0,
  max: 10,
  step: 0.5
}).mask("#input");

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

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

Обработка некорректных диапазонов

Если параметры заданы некорректно, например:

min: 100,
max: 10

поведение зависит от версии Inputmask и может включать:

  • игнорирование ограничений;
  • автоматическую нормализацию (swap min/max);
  • отключение диапазонной проверки.

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

Особенности работы в режиме greedy

В режиме жадной маски (greedy: true) диапазон может влиять на длину вводимого значения:

Inputmask({
  alias: "numeric",
  min: 0,
  max: 999,
  greedy: true
}).mask("#input");

Здесь маска стремится заполнить доступные позиции, но не допускает выход за пределы max.

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

При установке значения через Jav * aScript:

const im = new Inputmask({
  alias: "numeric",
  min: 10,
  max: 20
});
im.mask("#input");

document.querySelector("#input").value = 50;

Inputmask выполняет проверку и может:

  • автоматически скорректировать значение до 20;
  • либо оставить значение до момента blur и затем исправить его.

Совместимость с другими параметрами numeric alias

min и max тесно связаны с другими настройками:

  • digits — влияет на точность диапазона;
  • allowMinus — определяет возможность отрицательных значений;
  • rightAlign — влияет на визуальное представление числа;
  • unmaskAsNumber — влияет на тип возвращаемого значения.

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

Практическая модель обработки диапазона

Логика работы Inputmask с min/max можно представить в виде последовательности:

  1. получение ввода пользователя;
  2. преобразование в числовое значение;
  3. проверка на min;
  4. проверка на max;
  5. применение округления или шага;
  6. возврат скорректированного значения в поле.

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

Оглавление