Расширение существующих алиасов

Алиасы в Inputmask позволяют скрывать сложную конфигурацию маски за коротким именем. Встроенные алиасы (datetime, numeric, currency, email, url, ip и другие) покрывают типовые сценарии, однако в реальных проектах часто возникает необходимость изменить их поведение без полного переписывания логики.

Расширение существующего алиаса решает несколько задач:

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

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

Базовый механизм расширения

Для расширения существующего алиаса используется метод Inputmask.extendAliases().

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

Inputmask.extendAliases({
    myAlias: {
        alias: "datetime",
        inputFormat: "dd.mm.yyyy"
    }
});

Здесь:

myAlias — имя нового алиаса;
alias: "datetime" — указание родительского алиаса;
остальные параметры переопределяют настройки базовой маски.

После регистрации:

Inputmask("myAlias").mask("#date");

Наследование параметров

При расширении алиаса новый объект получает:

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

Переопределяются только указанные свойства.

Пример:

Inputmask.extendAliases({
    shortDate: {
        alias: "datetime",
        inputFormat: "dd.mm.yy"
    }
});

Все остальные настройки datetime сохраняются автоматически.

Переопределение формата даты

Одна из самых распространённых задач — изменение стандартного формата.

Inputmask.extendAliases({
    ruDate: {
        alias: "datetime",
        inputFormat: "dd.mm.yyyy",
        placeholder: "дд.мм.гггг"
    }
});

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

Inputmask("ruDate").mask("#birthdate");

Поле будет автоматически:

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

Добавление ограничений диапазона

Расширенный алиас может включать дополнительные ограничения.

Inputmask.extendAliases({
    modernYear: {
        alias: "datetime",
        inputFormat: "dd.mm.yyyy",
        min: "01.01.2000",
        max: "31.12.2099"
    }
});

Такой подход полезен:

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

Переопределение placeholder

Встроенные алиасы часто используют универсальные placeholder-символы. Расширение позволяет стандартизировать отображение.

Inputmask.extendAliases({
    customCurrency: {
        alias: "currency",
        placeholder: "0"
    }
});

Или:

Inputmask.extendAliases({
    readableDate: {
        alias: "datetime",
        inputFormat: "dd/mm/yyyy",
        placeholder: "ДД/ММ/ГГГГ"
    }
});

Расширение числовых алиасов

Алиасы numeric, decimal, currency особенно часто расширяются в корпоративных системах.

Пример денежного формата

Inputmask.extendAliases({
    kzCurrency: {
        alias: "currency",
        prefix: "₸ ",
        groupSeparator: " ",
        radixPoint: ".",
        digits: 2,
        autoGroup: true,
        digitsOptional: false,
        removeMaskOnSubmit: true
    }
});

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

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

Расширение email-алиаса

Стандартный email можно адаптировать под внутренние корпоративные ограничения.

Inputmask.extendAliases({
    corporateEmail: {
        alias: "email",
        regex: "^[a-zA-Z0-9._%+-]+@company\\.com$"
    }
});

Теперь будут разрешены только адреса домена company.com.

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

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

Inputmask.extendAliases({
    phoneClean: {
        alias: "phone",
        
        onBeforePaste: function (value) {
            return value.replace(/[^\d]/g, "");
        }
    }
});

Такая обработка:

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

Добавление пользовательской логики

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

Inputmask.extendAliases({
    uppercaseEmail: {
        alias: "email",

        onBeforePaste: function (value) {
            return value.toLowerCase();
        },

        onBeforeWrite: function (event, buffer) {
            console.log(buffer.join(""));
        }
    }
});

Переопределение greedy

Параметр greedy влияет на отображение необязательных частей маски.

Inputmask.extendAliases({
    flexiblePhone: {
        alias: "phone",
        greedy: false
    }
});

При false необязательные секции отображаются только при необходимости.

Комбинирование alias и mask

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

Inputmask.extendAliases({
    serialNumber: {
        alias: "numeric",
        mask: "SN-999999"
    }
});

Здесь:

числовая логика наследуется от numeric;
структура поля задаётся через mask.

Добавление postValidation

postValidation позволяет внедрить дополнительную проверку после основной валидации.

Inputmask.extendAliases({
    evenNumber: {
        alias: "numeric",

        postValidation: function (buffer) {
            const value = parseInt(buffer.join(""));

            return value % 2 === 0;
        }
    }
});

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

Расширение phone-алиасов

Телефонные маски часто требуют локальной адаптации.

Inputmask.extendAliases({
    kzPhone: {
        alias: "phone",
        mask: "+7 (799) 999-99-99"
    }
});

Или:

Inputmask.extendAliases({
    officePhone: {
        alias: "phone",
        mask: "+7 (999) 999-99-99 доб. 9999"
    }
});

Наследование нескольких уровней

Алиасы могут наследоваться цепочкой.

Inputmask.extendAliases({
    baseCurrency: {
        alias: "currency",
        groupSeparator: " "
    },

    tengeCurrency: {
        alias: "baseCurrency",
        prefix: "₸ "
    }
});

Получается многоуровневая архитектура конфигураций.

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

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

Переопределение definitions

Расширенный алиас может изменять определения символов.

Inputmask.extendAliases({
    hexColor: {
        mask: "#******",

        definitions: {
            "*": {
                validator: "[0-9A-Fa-f]"
            }
        }
    }
});

Поддерживаются значения:

#FFFFFF
#000000
#A1B2C3

Создание алиаса поверх regex

Расширение может использовать регулярные выражения.

Inputmask.extendAliases({
    productCode: {
        regex: "[A-Z]{3}-\\d{4}"
    }
});

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

артикулов;
внутренних идентификаторов;
кодов товаров;
инвентарных номеров.

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

Параметр jitMasking включает ленивое отображение маски.

Inputmask.extendAliases({
    smartDate: {
        alias: "datetime",
        inputFormat: "dd.mm.yyyy",
        jitMasking: true
    }
});

Маска отображается постепенно по мере ввода.

Переопределение insertMode

insertMode управляет поведением замены символов.

Inputmask.extendAliases({
    overwriteDate: {
        alias: "datetime",
        insertMode: false
    }
});

При false новые символы заменяют существующие.

Создание международных форматов

Расширение позволяет организовать локализованные алиасы.

Inputmask.extendAliases({
    usDate: {
        alias: "datetime",
        inputFormat: "mm/dd/yyyy"
    },

    euDate: {
        alias: "datetime",
        inputFormat: "dd.mm.yyyy"
    },

    isoDate: {
        alias: "datetime",
        inputFormat: "yyyy-mm-dd"
    }
});

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

В крупных приложениях расширенные алиасы обычно выносятся в отдельный модуль.

// masks.js

Inputmask.extendAliases({
    appDate: {
        alias: "datetime",
        inputFormat: "dd.mm.yyyy"
    },

    appCurrency: {
        alias: "currency",
        prefix: "₸ "
    }
});

import "./masks.js";

Inputmask("appDate").mask("#date");

Переопределение autoUnmask

Параметр autoUnmask автоматически извлекает чистое значение.

Inputmask.extendAliases({
    cleanPhone: {
        alias: "phone",
        autoUnmask: true
    }
});

Значение поля:

7771234567

вместо:

+7 (777) 123-45-67

Расширение алиасов с nullable-поведением

Некоторые формы требуют корректной обработки пустых значений.

Inputmask.extendAliases({
    nullableCurrency: {
        alias: "currency",
        nullable: true
    }
});

Поле может возвращать null вместо пустой строки.

Интеграция с data-атрибутами

Расширенные алиасы удобно использовать через HTML.

<input data-inputmask-alias="ruDate">

Инициализация:

Inputmask().mask(document.querySelectorAll("input"));

Конфликт параметров при наследовании

Если дочерний алиас переопределяет свойство, приоритет всегда получает дочерняя конфигурация.

Inputmask.extendAliases({
    parentAlias: {
        placeholder: "_"
    },

    childAlias: {
        alias: "parentAlias",
        placeholder: "*"
    }
});

Результат:

**

а не:

__

Расширение через функции

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

Inputmask.extendAliases({
    dynamicCurrency: {
        alias: "currency",

        onBeforeMask: function (value) {
            return parseFloat(value).toFixed(2);
        }
    }
});

Переопределение skipOptionalPartCharacter

Символ пропуска необязательной части можно изменить.

Inputmask.extendAliases({
    customOptional: {
        alias: "phone",
        skipOptionalPartCharacter: " "
    }
});

Архитектура корпоративных алиасов

В крупных проектах обычно формируется иерархия:

baseInput
 ├── baseNumeric
 │    ├── currency
 │    ├── percentage
 │    └── quantity
 │
 ├── baseDate
 │    ├── shortDate
 │    ├── longDate
 │    └── isoDate
 │
 └── basePhone
      ├── mobilePhone
      └── officePhone

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

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

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

Потеря родительского alias

Ошибка:

Inputmask.extendAliases({
    myDate: {
        inputFormat: "dd.mm.yyyy"
    }
});

Без alias объект не наследует логику datetime.

Правильно:

Inputmask.extendAliases({
    myDate: {
        alias: "datetime",
        inputFormat: "dd.mm.yyyy"
    }
});

Конфликт mask и regex

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

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

Inputmask.extendAliases({
    brokenAlias: {
        mask: "9999",
        regex: "[A-Z]+"
    }
});

mask и regex будут конкурировать.

Переопределение критичных функций

Некоторые встроенные алиасы содержат сложную внутреннюю логику.

Например, у datetime есть:

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

Полная замена внутренних обработчиков может нарушить работу маски.

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

Расширенные алиасы:

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

Особенно заметен эффект в:

ERP-системах;
CRM;
банковских интерфейсах;
административных панелях;
SaaS-приложениях;
конструкторах форм.