Email-маски

Email-маски в библиотеке Inputmask используются для контроля ввода адресов электронной почты. Маска ограничивает допустимые символы, формирует структуру адреса и предотвращает появление некорректных значений ещё на этапе ввода.

В отличие от обычных строковых масок, email-маски работают с более сложными правилами:

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

Inputmask содержит встроенный alias email, который реализует основные правила RFC-подобного ввода без необходимости ручного описания сложного шаблона.

Подключение email-маски

Базовый пример

<input id="email">
Inputmask("email").mask("#email");

После подключения маски поле начинает контролировать структуру email-адреса.

Допустимые примеры:

user@example.com
admin@test.org
contact.mail@company.kz

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

user@@mail.com
test@
@mail.com

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

Alias — это предустановленный набор правил.

Вместо сложной маски:

Inputmask({
    mask: "*{1,64}[.*{1,64}]@*{1,255}[.*{2,6}]"
});

используется короткая запись:

Inputmask("email");

или:

Inputmask({
    alias: "email"
});

Внутри alias уже определены:

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

Маска email с селектором

Подключение к одному элементу

Inputmask("email").mask(document.getElementById("email"));

Подключение через querySelector

Inputmask("email").mask(document.querySelector(".email-input"));

Подключение к нескольким элементам

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

Настройка placeholder

По умолчанию placeholder формируется автоматически.

Собственный placeholder

Inputmask({
    alias: "email",
    placeholder: "_"
}).mask("#email");

Результат:

____@____.___

Пустой placeholder

Inputmask({
    alias: "email",
    placeholder: ""
}).mask("#email");

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

Очистка значения

removeMaskOnSubmit

Удаляет служебные символы при отправке формы.

Inputmask({
    alias: "email",
    removeMaskOnSubmit: true
}).mask("#email");

Для email это особенно полезно при комбинировании с дополнительными префиксами или кастомными масками.

Автоочистка некорректных значений

clearIncomplete

Если адрес введён не полностью, поле очищается.

Inputmask({
    alias: "email",
    clearIncomplete: true
}).mask("#email");

Пример:

user@

После потери фокуса значение удаляется.

Обработка регистра символов

Email-адреса обычно отображаются в нижнем регистре.

Автоматическое преобразование

Inputmask({
    alias: "email",
    casing: "lower"
}).mask("#email");

Ввод:

USER@MAIL.COM

Преобразуется в:

user@mail.com

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

maxLength

const input = document.getElementById("email");

input.maxLength = 50;

Inputmask("email").mask(input);

Ограничение через regex

Inputmask({
    regex: ".{1,50}"
}).mask("#email");

Email-маска с регулярным выражением

Иногда стандартного alias недостаточно.

Только Gmail-адреса

Inputmask({
    regex: "[a-zA-Z0-9._%+-]+@gmail\\.com"
}).mask("#email");

Допустимо:

user@gmail.com

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

user@yahoo.com

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

Только .com

Inputmask({
    regex: "[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.com"
}).mask("#email");

Только корпоративная почта

Inputmask({
    regex: "[a-zA-Z0-9._%+-]+@company\\.kz"
}).mask("#email");

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

Иногда требуется строго фиксированный шаблон.

Пример

Inputmask({
    mask: "*{1,20}@company.com"
}).mask("#email");

Разрешены адреса:

admin@company.com
user@company.com

Запретятся:

admin@gmail.com

Допустимые символы email

Стандартный alias email разрешает:

Локальная часть

abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
._%+-

Доменная часть

abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
-
.

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

Definitions позволяют создать собственные правила символов.

Только латиница и цифры

Inputmask({
    definitions: {
        "L": {
            validator: "[a-zA-Z0-9]"
        }
    },
    mask: "L{1,20}@L{1,20}.L{2,4}"
}).mask("#email");

Маска email с несколькими доменами

Разрешённые домены

Inputmask({
    regex: "[a-zA-Z0-9._%+-]+@(gmail\\.com|yahoo\\.com|outlook\\.com)"
}).mask("#email");

Допустимо:

user@gmail.com
user@yahoo.com

Динамическая email-маска

Смена правил во время ввода

const input = document.getElementById("email");

input.addEventListener("input", () => {
    if (input.value.includes("@company")) {
        Inputmask({
            regex: "[a-zA-Z0-9._%+-]+@company\\.com"
        }).mask(input);
    }
});

Проверка валидности

isComplete

Метод определяет, заполнена ли маска корректно.

const im = new Inputmask("email");

im.mask("#email");

const valid = im.isComplete();

Получение очищенного значения

unmaskedvalue

const value = document
    .getElementById("email")
    .inputmask
    .unmaskedvalue();

console.log(value);

Работа с событиями

oncomplete

Срабатывает после полного ввода email.

Inputmask({
    alias: "email",
    oncomplete: function () {
        console.log("Email введён полностью");
    }
}).mask("#email");

onincomplete

Inputmask({
    alias: "email",
    onincomplete: function () {
        console.log("Email заполнен не полностью");
    }
}).mask("#email");

oncleared

Inputmask({
    alias: "email",
    oncleared: function () {
        console.log("Поле очищено");
    }
}).mask("#email");

Email-маска внутри формы

HTML

<form id="form">
    <input id="email">
    <button type="submit">Отправить</button>
</form>

Javascript

Inputmask({
    alias: "email",
    clearIncomplete: true
}).mask("#email");

document.getElementById("form")
    .addEventListener("submit", function (event) {

        const valid =
            document.getElementById("email")
            .inputmask
            .isComplete();

        if (!valid) {
            event.preventDefault();
        }
    });

Использование email-маски в React

import Inputmask from "inputmask";
import { useEffect, useRef } from "react";

function App() {

    const inputRef = useRef(null);

    useEffect(() => {
        Inputmask("email").mask(inputRef.current);
    }, []);

    return (
        <input ref={inputRef} />
    );
}

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

mounted() {
    Inputmask("email").mask(this.$refs.email);
}
<input ref="email">

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

import Inputmask from "inputmask";

ngAfterViewInit() {
    Inputmask("email").mask(this.email.nativeElement);
}

Валидация вместе с HTML5

Inputmask можно комбинировать со стандартной HTML-проверкой.

<input
    id="email"
    type="email"
    required
>
Inputmask("email").mask("#email");

HTML5 выполняет финальную проверку при отправке формы.

Email-маска и мобильные устройства

Для мобильных устройств желательно указывать тип поля:

<input
    type="email"
    id="email"
>

Это даёт:

  • клавиатуру с символом @;
  • быстрый ввод доменов;
  • улучшенную автокоррекцию.

Частые проблемы

Конфликт с autocomplete

Браузер может вставлять email целиком, обходя часть логики маски.

Решение:

<input
    id="email"
    autocomplete="off"
>

Конфликт с React controlled input

При использовании состояния React маска может перезаписывать значение.

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

<input value={email} onCha nge={...} />

Лучше:

<input defaultValue="" ref={inputRef} />

или использовать специализированные обёртки.

Проблемы с кириллицей

Стандартный alias email не поддерживает кириллические символы.

Некорректно:

тест@почта.рф

Для поддержки Unicode требуется собственный regex.

Поддержка международных доменов

Unicode email

Inputmask({
    regex: "[\\w.-]+@[\\w.-]+\\.[\\w]{2,}"
}).mask("#email");

Такой вариант частично поддерживает национальные домены.

Комбинирование email-маски с дополнительными проверками

Inputmask контролирует структуру ввода, но не гарантирует существование адреса.

Обычно дополнительно используются:

  • серверная валидация;
  • SMTP-проверка;
  • DNS-проверка MX-записей;
  • подтверждение через письмо.

Практический пример формы регистрации

<form id="register-form">

    <input
        id="email"
        type="email"
        placeholder="Введите email"
    >

    <button type="submit">
        Регистрация
    </button>

</form>
Inputmask({
    alias: "email",
    clearIncomplete: true,
    casing: "lower",
    showMaskOnHover: false
}).mask("#email");

document
    .getElementById("register-form")
    .addEventListener("submit", function(event) {

        const input =
            document.getElementById("email");

        const valid =
            input.inputmask.isComplete();

        if (!valid) {

            event.preventDefault();

            input.classList.add("error");
        }
    });

Рекомендации по использованию

Когда email-маска полезна

  • формы регистрации;
  • авторизация;
  • подписка на рассылку;
  • CRM-системы;
  • корпоративные панели;
  • административные интерфейсы.

Когда лучше отказаться от жёсткой маски

Слишком строгие ограничения могут мешать:

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

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

  1. мягкая email-маска;
  2. HTML5 validation;
  3. серверная проверка;
  4. подтверждение email через письмо.
Оглавление