Как правильно проверить email на JavaScript: валидация с помощью регулярных выражений и не только

Правильная валидация email в JavaScript: подробное руководство

Привет! Отличный вопрос. Валидация email — одна из самых частых задач, но она таит много подводных камней. Давай разберёмся по порядку.

Почему простая проверка через includes() не работает?

Твой текущий код пропускает очевидно невалидные адреса. Email должен соответствовать определённой структуре:

• Локальная часть (до @) — может содержать буквы, цифры и некоторые спецсимволы
• Домен (после @) — минимум две части, разделённые точкой
• TLD (последняя часть домена) — не может быть просто "com" или "ru", но может быть длинным (например, .museum)

Лучший подход: регулярное выражение + здравый смысл

Вот проверенное временем решение, которое используют в реальных проектах:

function validateEmail(email) {
    const re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    return re.test(email);
}

// Тесты
console.log(validateEmail('user@example.com'));      // true
console.log(validateEmail('user.name+tag@example.co.uk')); // true
console.log(validateEmail('test@test'));             // false (нет TLD)
console.log(validateEmail('@.com'));                 // false
console.log(validateEmail('user@.com'));             // false
console.log(validateEmail('user@example.c'));        // false (TLD слишком короткий)

Разбор регулярного выражения по частям:

• ^ — начало строки
• [a-zA-Z0-9._%+-]+ — локальная часть: буквы, цифры, символы . _ % + - (один или более)
• @ — обязательный символ "собаки"
• [a-zA-Z0-9.-]+ — домен: буквы, цифры, точки и дефисы
• \. — точка перед TLD (экранированная)
• [a-zA-Z]{2,} — TLD: только буквы, минимум 2 символа
• $ — конец строки

Важные моменты и нюансы:

• Не пытайся сделать "идеальный" regex. Полный стандарт RFC 5322 очень сложен, и его реализация в regex — это сотни строк. Для 99% проектов достаточно простого паттерна выше.
• Домены верхнего уровня могут быть длинными (.museum, .travel) — наше выражение это поддерживает, проверяя только длину (минимум 2 символа).
• Международные домены (IDN) — если нужна поддержка кириллицы (например, пользователь@пример.рф), regex нужно расширять. Но обычно проще сначала преобразовать в punycode.

Расширенная версия с дополнительными проверками:

function validateEmailAdvanced(email) {
    // Базовая проверка формата
    const basicRe = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    if (!basicRe.test(email)) return false;
    
    // Дополнительные проверки
    const parts = email.split('@');
    const localPart = parts[0];
    const domain = parts[1];
    
    // Локальная часть не должна начинаться или заканчиваться точкой
    if (localPart.startsWith('.') || localPart.endsWith('.')) return false;
    
    // В домене не должно быть двух точек подряд
    if (domain.includes('..')) return false;
    
    // TLD не может быть только цифровым
    const tld = domain.split('.').pop();
    if (/^\d+$/.test(tld)) return false;
    
    return true;
}

Производственная практика:

1. Клиентская валидация — для UX. Используй её, чтобы сразу показать ошибку пользователю. Но помни: всё, что работает на клиенте, можно обойти.
2. Серверная валидация — обязательна. Всегда проверяй email на сервере, даже если клиент уже проверил. Сервер — последняя линия обороны.
3. Лучшая проверка — отправка письма. Единственный способ 100% убедиться, что email существует и принадлежит пользователю — отправить на него письмо с кодом подтверждения.

Надеюсь, теперь стало понятнее! Начни с простого regex, добавляй дополнительные проверки по мере необходимости, и всегда помни про серверную валидацию.

<input type="email" id="emailInput" required>
<span id="error" style="color:red; display:none;">Неверный email</span>

<script>
const input = document.getElementById('emailInput');
const error = document.getElementById('error');

input.addEventListener('input', function() {
    if (this.validity.typeMismatch || this.validity.valueMissing) {
        error.style.display = 'block';
    } else {
        error.style.display = 'none';
    }
});
</script>

// Установка: npm install validator
import validator from 'validator';

function validateEmail(email) {
    return validator.isEmail(email);
}

console.log(validator.isEmail('user@example.com')); // true
console.log(validator.isEmail('test@test'));        // false