Рубрики
Без рубрики

Как подтвердить адрес электронной почты в JavaScript

Существует множество способов подтвердить адрес электронной почты. Изучите правильный способ, а также узнайте все имеющиеся у вас варианты, используя простой JavaScript

Проверка адреса электронной почты – одна из распространенных операций, выполняемых при обработке формы.

Это полезно в контактных формах, формах регистрации и входа в систему и во многом другом.

Некоторые люди предполагают, что вам вообще не следует проверять электронную почту . Я думаю, что немного проверки, не пытаясь быть чрезмерно усердным, будет лучше.

Каким правилам должна соответствовать проверка электронной почты?

Адрес электронной почты состоит из 2 частей: локальной части и доменной части.

Локальная часть может содержать

  • любой буквенно-цифровой символ: a-za-Z0-9
  • пунктуация: "(),:;<>@[\]
  • специальные символы: !#$%&'*+-/=?^_ {|}~
  • точка . , если это не первый или последний символ. Кроме того, это не может быть повторено

Доменная часть может содержать

  • любой буквенно-цифровой символ: a-za-Z0-9
  • дефис - , если это не первый или последний символ. Это можно повторить

Используйте регулярное выражение

Лучший вариант проверки адреса электронной почты – использовать регулярное выражение.

Нет регулярного выражения универсальной проверки электронной почты. Кажется, все используют разные, и большинство регулярных выражений, которые вы найдете в Интернете, не будут соответствовать самым базовым сценариям электронной почты из-за неточности или того факта, что они не вычисляют новые введенные домены или интернационализированные адреса электронной почты

Не используйте никаких регулярных выражений вслепую, но сначала проверьте их.

Я сделал этот пример на глюке , который будет проверять список адресов электронной почты, которые считаются действительными, на соответствие регулярному выражению. Вы можете изменить регулярное выражение и сравнить его с другими, которые вы хотите использовать.

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

Примечание: я этого не придумывал. Я нашел это в ответе Quora, но я не уверен, что это был первоисточник.

Это функция, которая проверяет использование этого регулярного выражения:

const validate = (email) => {
  const expression = /(?!.*\.{2})^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i

  return expression.test(String(email).toLowerCase())
}

Все распространенные случаи выполнены, можно предположить, что 99,9% адресов электронной почты, которые люди будут добавлять, успешно проверены.

Код этого сбоя содержит другие регулярные выражения, которые вы можете легко попробовать, изменив проект.

Хотя это довольно точно, в некоторых крайних случаях с этим регулярным выражением есть пара проблем, с которыми вы можете смириться (или нет) в зависимости от ваших потребностей.

Ложный отрицательный результат для странных адресов, таких как

"very.(),:;<>[]".VERY."very@\ "very".unusual"@strange.example.com

one."more\ long"@example.website.place

Ложноотрицательный результат для локальных адресов:

admin@mailserver1
user@localserver

малопригоден для общедоступных веб-сайтов (на самом деле плюс на общедоступных веб-сайтах в том, что им отказано)

Также , ложноотрицательный результат для электронных писем на основе IP:

user@[2001:DB8::1]
user@128.0.0.1

Существует ложное срабатывание для адресов со слишком длинной локальной частью:

1234567890123456789012345678901234567890123456789012345678901234+x@example.com

Вам нужно более простое регулярное выражение?

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

Использование его на данном этапе заключается в его копировании/вставке.

Гораздо более простое решение – просто проверить, содержит ли введенный адрес что-то, затем символ @ , а затем что-то еще.

В этом случае это регулярное выражение сделает свое дело:

const expression = /\S+@\S+/
expression.test(String('my-email@test.com').toLowerCase())

Это вызовет много ложных срабатываний, но в конце концов окончательная проверка достоверности адреса электронной почты происходит, когда вы просите пользователя нажать что-то в письме, чтобы подтвердить адрес , и я бы предпочел попытаться отправить неверное электронное письмо, чем отклонить действительное электронное письмо из-за ошибки в моем регулярном выражении .

Это указано в приведенном выше сбое, так что вы можете легко попробовать.

Проверка поля HTML напрямую

HTML5 предоставил нам тип поля email , поэтому не забывайте, что вы также можете проверять электронные письма с его помощью:

В зависимости от реализации браузера эта проверка также даст вам разные результаты.

Этот сбой показывает те же электронные письма, с которыми я тестировал регулярное выражение, и их результат при проверке через HTML-форму.

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

Проверка на стороне сервера

Если в вашем приложении есть сервер, сервер также должен проверять электронную почту, потому что вы никогда не сможете доверять клиентскому коду, а также JavaScript может быть отключен в браузере пользователя.

Использование Node.js у вас есть преимущество в том, что вы можете повторно использовать внешний код как есть. В этом случае функция проверки может работать как на стороне клиента, так и на стороне сервера.

Вы также можете использовать готовые пакеты, такие как является электронной почтой , но и в этом случае результаты различаются. Вот тест электронной почты is по тем же электронным письмам, которые мы использовали выше: Вот тест электронной почты is по тем же электронным письмам, которые мы использовали выше:

Оригинал: “https://flaviocopes.com/how-to-validate-email-address-javascript/”