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

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

Этот параметр играет важную роль при работе:

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

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

Базовое использование

<input id="price">
new AutoNumeric('#price', {
    maximumValue: '10000'
});

Теперь поле не позволит ввести значение больше 10000.

Если пользователь попытается набрать:

15000

библиотека:

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

Тип данных параметра

maximumValue всегда задаётся строкой.

Правильно:

maximumValue: '5000'

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

maximumValue: 5000

Причина заключается во внутренней системе обработки чисел в AutoNumeric. Библиотека работает со строковыми представлениями для предотвращения ошибок округления и потери точности.

Ограничение положительных чисел

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

new AutoNumeric('#amount', {
    minimumValue: '0',
    maximumValue: '999999'
});

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

0
150
25000
999999

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

1000000
2500000

Работа с дробными числами

maximumValue поддерживает десятичные значения.

new AutoNumeric('#temperature', {
    decimalPlaces: 2,
    maximumValue: '99.99'
});

Допустимо:

45.50
99.99

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

100.00
150.25

Ограничение денежных сумм

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

new AutoNumeric('#salary', {
    currencySymbol: '$',
    digitGroupSeparator: ',',
    decimalCharacter: '.',
    maximumValue: '1000000'
});

Максимально допустимая сумма:

$1,000,000

Попытка ввода большей суммы будет отклонена.

Ограничение процентов

new AutoNumeric('#percent', {
    suffixText: '%',
    decimalPlaces: 2,
    minimumValue: '0',
    maximumValue: '100'
});

Это особенно полезно для:

  • налогов;
  • скидок;
  • коэффициентов;
  • прогресс-баров;
  • вероятностей.

Использование отрицательных значений

maximumValue может быть отрицательным.

new AutoNumeric('#balance', {
    minimumValue: '-1000',
    maximumValue: '-10'
});

Допустимый диапазон:

-1000 ... -10

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

0
5
-5

Связь с minimumValue

Параметры minimumValue и maximumValue почти всегда используются вместе.

new AutoNumeric('#range', {
    minimumValue: '10',
    maximumValue: '20'
});

Диапазон:

10 ≤ значение ≤ 20

Что происходит при превышении лимита

Поведение зависит от настроек библиотеки и способа ввода.

Возможные сценарии:

Блокировка ввода

Пользователь не сможет набрать лишнюю цифру.

Например:

9999

При попытке добавить ещё один символ:

99999

ввод блокируется.

Автоматическая корректировка

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

Например:

150

автоматически превращается в:

100

Ошибка валидации

При интеграции с формами можно отображать сообщение об ошибке.

if (anElement.getNumber() > 1000) {
    console.log('Превышен лимит');
}

Динамическое изменение максимального значения

Максимальный лимит можно менять во время работы приложения.

const an = new AutoNumeric('#sum', {
    maximumValue: '1000'
});

Позже:

an.update({
    maximumValue: '5000'
});

После обновления поле начнёт принимать большие значения.

Изменение лимита в зависимости от роли пользователя

const limit = isAdmin ? '100000' : '1000';

new AutoNumeric('#payment', {
    maximumValue: limit
});

Подобная схема часто применяется:

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

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

new AutoNumeric('#quantity', {
    decimalPlaces: 0,
    minimumValue: '1',
    maximumValue: '500'
});

Поле принимает только целые значения от 1 до 500.

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

new AutoNumeric('#age', {
    decimalPlaces: 0,
    minimumValue: '0',
    maximumValue: '120'
});

Ограничение длины числа

maximumValue косвенно ограничивает длину числа.

Например:

maximumValue: '9999'

фактически ограничивает ввод четырьмя цифрами.

Очень большие значения

Библиотека поддерживает числа большой длины.

new AutoNumeric('#bigNumber', {
    maximumValue: '999999999999999.99'
});

Это важно для:

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

Особенности сравнения значений

Сравнение выполняется библиотекой корректно даже при работе со строками.

maximumValue: '1000'

будет правильно сравниваться с:

999
1000
1001

без типичных ошибок JavaScript, связанных с floating point arithmetic.

Использование вместе с overrideMinMaxLimits

Параметр overrideMinMaxLimits влияет на обработку выхода за пределы диапазона.

Пример:

new AutoNumeric('#test', {
    minimumValue: '0',
    maximumValue: '100',
    overrideMinMaxLimits: 'ignore'
});

Варианты поведения:

Значение Описание
ignore Игнорировать ограничения
floor Принудительно применять минимум
ceiling Принудительно применять максимум
invalid Считать значение невалидным

Использование с валютами

new AutoNumeric('#eur', {
    currencySymbol: '€',
    currencySymbolPlacement: 'p',
    maximumValue: '50000'
});

Использование с разделителями

new AutoNumeric('#income', {
    digitGroupSeparator: ' ',
    decimalCharacter: ',',
    maximumValue: '10000000'
});

Отображение:

10 000 000

Проверка значения через API

Получение текущего числа:

const value = anElement.getNumber();

Проверка:

if (value > 5000) {
    console.log('Лимит превышен');
}

Получение настроек

const settings = anElement.getSettings();

console.log(settings.maximumValue);

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

anElement.set(500);

Если значение превышает лимит:

anElement.set(500000);

результат зависит от конфигурации ограничений.

Вставка значения через paste

При вставке библиотека также проверяет maximumValue.

Если ограничение:

maximumValue: '100'

и пользователь вставляет:

5000

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

Использование в React

useEffect(() => {
    new AutoNumeric(inputRef.current, {
        maximumValue: '10000'
    });
}, []);

Использование во Vue

mounted() {
    new AutoNumeric(this.$refs.amount, {
        maximumValue: '5000'
    });
}

Использование в Angular

ngAfterViewInit(): void {
    new AutoNumeric(this.input.nativeElement, {
        maximumValue: '25000'
    });
}

Типичные ошибки

Использование числа вместо строки

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

maximumValue: 1000

Правильно:

maximumValue: '1000'

Значение меньше minimumValue

Ошибка:

minimumValue: '100',
maximumValue: '50'

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

Несовпадение десятичной точности

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

decimalPlaces: 2,
maximumValue: '10'

при ожидании:

10.99

Правильно:

maximumValue: '10.99'

Практический пример финансовой формы

<input id="credit">
new AutoNumeric('#credit', {
    currencySymbol: '$',
    digitGroupSeparator: ',',
    decimalCharacter: '.',
    decimalPlaces: 2,
    minimumValue: '1000',
    maximumValue: '50000'
});

Допустимый диапазон кредита:

$1,000.00 — $50,000.00

Практический пример для интернет-магазина

new AutoNumeric('#cartCount', {
    decimalPlaces: 0,
    minimumValue: '1',
    maximumValue: '99'
});

Поле не позволит заказать более 99 единиц товара.

Практический пример налоговой ставки

new AutoNumeric('#tax', {
    suffixText: '%',
    decimalPlaces: 2,
    minimumValue: '0',
    maximumValue: '20'
});

Совместимость с методами форматирования

maximumValue корректно работает совместно с:

  • currencySymbol
  • digitGroupSeparator
  • decimalCharacter
  • decimalPlaces
  • suffixText
  • negativePositiveSignPlacement
  • leadingZero
  • roundingMethod

Влияние на UX

Правильно настроенное максимальное значение:

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

Рекомендуемые значения для разных задач

Сценарий maximumValue
Проценты '100'
Возраст '120'
Количество товаров '999'
Зарплата '1000000'
Банковский перевод '100000000'
Налоговая ставка '20'
Рейтинг '5'
Температура '999.99'

Комбинирование с другими ограничениями

new AutoNumeric('#complex', {
    minimumValue: '0',
    maximumValue: '1000',
    decimalPlaces: 2,
    leadingZero: 'deny',
    emptyInputBehavior: 'zero'
});

Такая конфигурация:

  • запрещает отрицательные значения;
  • ограничивает максимум;
  • разрешает два знака после запятой;
  • запрещает лишние нули;
  • подставляет 0 в пустое поле.
Оглавление