Как проверить адрес электронной почты в JavaScript? - PullRequest
3795 голосов
/ 05 сентября 2008

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

Ответы [ 82 ]

4346 голосов
/ 05 сентября 2008

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

function validateEmail(email) {
    var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(String(email).toLowerCase());
}

Вот пример регулярного выражения, принимающего Unicode:

var re = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;

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

Вот пример вышесказанного в действии:

function validateEmail(email) {
  var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return re.test(email);
}

function validate() {
  var $result = $("#result");
  var email = $("#email").val();
  $result.text("");

  if (validateEmail(email)) {
    $result.text(email + " is valid :)");
    $result.css("color", "green");
  } else {
    $result.text(email + " is not valid :(");
    $result.css("color", "red");
  }
  return false;
}

$("#validate").on("click", validate);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <p>Enter an email address:</p>
  <input id='email'>
  <button type='submit' id='validate'>Validate!</button>
</form>

<h2 id='result'></h2>
689 голосов
/ 03 сентября 2009

Просто для полноты, здесь у вас есть другое регулярное выражение, соответствующее RFC 2822

Официальный стандарт известен как RFC 2822 . Он описывает синтаксис, которому должны соответствовать действительные адреса электронной почты. Вы можете (, но не должны & mdash; читать ) реализовать его с помощью этого регулярного выражения:

(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])

(...) Мы получим более практическую реализацию RFC 2822, если опустить синтаксис с использованием двойных кавычек и квадратных скобок. Он по-прежнему будет совпадать с 99,99% всех адресов электронной почты, фактически используемых сегодня.

[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?

Еще одно изменение, которое вы можете внести, - разрешить использование любого двухбуквенного домена верхнего уровня с кодом страны и только определенных общих доменов верхнего уровня. Это регулярное выражение фильтрует фиктивные адреса электронной почты, такие как asdf@adsf.adsf. Вам потребуется обновить его при добавлении новых доменов верхнего уровня .

[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+(?:[A-Z]{2}|com|org|net|gov|mil|biz|info|mobi|name|aero|jobs|museum)\b

Таким образом, даже при соблюдении официальных стандартов все еще есть компромиссы. Не копируйте вслепую регулярные выражения из онлайн-библиотек или дискуссионных форумов. Всегда проверяйте их на своих данных и в своих собственных приложениях.

Акцент на шахте

654 голосов
/ 09 февраля 2012

Я немного изменил ответ Джеймона для людей, которым нужна действительно простая проверка в виде:

anystring@anystring.anystring

Регулярное выражение:

/\S+@\S+\.\S+/

Пример функции JavaScript:

function validateEmail(email) 
{
    var re = /\S+@\S+\.\S+/;
    return re.test(email);
}
326 голосов
/ 08 сентября 2008

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

^\S+@\S+$

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

314 голосов
/ 02 мая 2009

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

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

182 голосов
/ 17 октября 2011

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

<form><input type="email" placeholder="me@example.com">
    <input type="submit">
</form>

jsFiddle ссылка

Из спецификации HTML5 :

A действительный адрес электронной почты - это строка, соответствующая продукции email следующего ABNF, набор символов для которого - Unicode.

email   = 1*( atext / "." ) "@" label *( "." label )
label   = let-dig [ [ ldh-str ] let-dig ]  ; limited to a length of 63 characters by RFC 1034 section 3.5
atext   = < as defined in RFC 5322 section 3.2.3 >
let-dig = < as defined in RFC 1034 section 3.5 >
ldh-str = < as defined in RFC 1034 section 3.5 >

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

Следующее JavaScript- и Perl-совместимое регулярное выражение является реализацией приведенного выше определения.

/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
114 голосов
/ 21 сентября 2015

Я считаю, что это лучшее решение:

/^[^\s@]+@[^\s@]+\.[^\s@]+$/

Позволяет следующие форматы:

1.  prettyandsimple@example.com
2.  very.common@example.com
3.  disposable.style.email.with+symbol@example.com
4.  other.email-with-dash@example.com
9.  #!$%&'*+-/=?^_`{}|~@example.org
6.  "()[]:,;@\\\"!#$%&'*+-/=?^_`{}| ~.a"@example.org
7.  " "@example.org (space between the quotes)
8.  üñîçøðé@example.com (Unicode characters in local part)
9.  üñîçøðé@üñîçøðé.com (Unicode characters in domain part)
10. Pelé@example.com (Latin)
11. δοκιμή@παράδειγμα.δοκιμή (Greek)
12. 我買@屋企.香港 (Chinese)
13. 甲斐@黒川.日本 (Japanese)
14. чебурашка@ящик-с-апельсинами.рф (Cyrillic)

Он явно универсален и допускает все важные международные символы, но при этом поддерживает базовый формат any@anything.anything. Он заблокирует пробелы, которые технически разрешены RFC, но они настолько редки, что я рад это сделать.

88 голосов
/ 20 декабря 2012

В современных браузерах вы можете опираться на ответ @ Sushil с чистым JavaScript и DOM :

function validateEmail(value) {
  var input = document.createElement('input');

  input.type = 'email';
  input.required = true;
  input.value = value;

  return typeof input.checkValidity === 'function' ? input.checkValidity() : /\S+@\S+\.\S+/.test(value);
}

Я собрал пример в скрипке http://jsfiddle.net/boldewyn/2b6d5/. В сочетании с обнаружением функций и проверкой «из костей» из Ответ Squirtle , он освобождает вас от расправы с регулярными выражениями и не борк на старых браузерах.

66 голосов
/ 05 сентября 2008

JavaScript может соответствовать регулярному выражению:

emailAddress.match( / some_regex /);

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

^((?>[a-zA-Z\d!#$%&'*+\-/=?^_`{|}~]+\x20*|"((?=[\x01-\x7f])[^"\\]|\\[\x01-\x7f])*
"\x20*)*(?<angle><))?((?!\.)(?>\.?[a-zA-Z\d!#$%&'*+\-/=?^_`{|}~]+)+|"((?=[\x01-\x
7f])[^"\\]|\\[\x01-\x7f])*")@(((?!-)[a-zA-Z\d\-]+(?<!-)\.)+[a-zA-Z]{2,}|\[(((?(?<
!\[)\.)(25[0-5]|2[0-4]\d|[01]?\d?\d)){4}|[a-zA-Z\d\-]*[a-zA-Z\d]:((?=[\x01-\x7f])
[^\\\[\]]|\\[\x01-\x7f])+)\])(?(angle)>)$
62 голосов
/ 15 апреля 2013

Это правильная версия RFC822.

function checkEmail(emailAddress) {
  var sQtext = '[^\\x0d\\x22\\x5c\\x80-\\xff]';
  var sDtext = '[^\\x0d\\x5b-\\x5d\\x80-\\xff]';
  var sAtom = '[^\\x00-\\x20\\x22\\x28\\x29\\x2c\\x2e\\x3a-\\x3c\\x3e\\x40\\x5b-\\x5d\\x7f-\\xff]+';
  var sQuotedPair = '\\x5c[\\x00-\\x7f]';
  var sDomainLiteral = '\\x5b(' + sDtext + '|' + sQuotedPair + ')*\\x5d';
  var sQuotedString = '\\x22(' + sQtext + '|' + sQuotedPair + ')*\\x22';
  var sDomain_ref = sAtom;
  var sSubDomain = '(' + sDomain_ref + '|' + sDomainLiteral + ')';
  var sWord = '(' + sAtom + '|' + sQuotedString + ')';
  var sDomain = sSubDomain + '(\\x2e' + sSubDomain + ')*';
  var sLocalPart = sWord + '(\\x2e' + sWord + ')*';
  var sAddrSpec = sLocalPart + '\\x40' + sDomain; // complete RFC822 email address spec
  var sValidEmail = '^' + sAddrSpec + '$'; // as whole string

  var reValidEmail = new RegExp(sValidEmail);

  return reValidEmail.test(emailAddress);
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...