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

В HTML есть свой собственный способ проверки правильного ввода почты с помощью type="email" для input’ов, но это не так эффективно, потому что исходный код можно изменить и voilà (вуаля) вам больше не нужно писать нужный формат, чтобы отправить форму. Лучше всего делать дополнительную проверку с 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);
}

У нее есть один параметр и она возвращает булевой результат, то есть правильный формат почты или нет.

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

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

Если этот вариант подходит больше всего, то не забудьте заменить его в функции.

Всегда помните о том, что любой пользователь может отключить JavaScript и тогда ваша проверка не будет работать. Для этого я советую дополнительно проверять формы на стороне сервера, например с помощью PHP. Или просить пользователя включить JavaScript с помощью <noscript></noscript> тегов, которые показываются только тем, у кого он отключен.

Пример

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

Я написал его с jQuery, чтобы новичкам было понятнее. Тем более тут самое важное — это лишь одну функция, которая не зависимо JavaScript библиотеки будет работать без проблем.

jQuery

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() {
  $("#result").text("");
  var email = $("#email").val();
  if (validateEmail(email)) {
    $("#result").text(email + " верный формат :)");
    $("#result").css("color", "green");
  } else {
    $("#result").text(email + " не верный формат :(");
    $("#result").css("color", "red");
  }
  return false;
}

$("#validate").bind("click", validate);

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <p>Введите вашу почту:</p>
  <input id='email'>
  <button type='submit' id='validate'>Проверить!</button>
</form>

<h2 id='result'></h2>

Демо

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

21516