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

Question

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

Answer 1

Поиск знака @ в поле ввода.

Answer 2

Вот простое регулярное выражение, которое просто проверяет основной формат электронной почты, например, X@Y.C:

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

Answer 3

Если вы хотите использовать Jquery и хотите использовать современный подход, используйте маску ввода JQuery с проверкой.

http://bseth99.github.io/projects/jquery-ui/5-jquery-masks.html

Демонстрация того, как простая маска ввода jquery здесь: http://codepen.io/anon/pen/gpRyBp

Пример простой маски ввода для примера даты НЕ полная проверка

 <input id="date" type="text" placeholder="YYYY-MM-DD"/>

и сценарий:

 $("#date").mask("9999-99-99",{placeholder:"YYYY-MM-DD"});

Answer 4

 <input type="email" class="form-control" required="required" placeholder="Email Address" name="Email" id="Email" autocomplete="Email">
 <button class="btn-1 shadow-0 full-width" type="button" id="register">Register account</button>

 $("#register").click(function(){       
    var rea = /^[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])?)*$/;
    var Email = $("#Email").val();
    var x = rea.test(Email);
    if (!x) {
        alert('Type Your valid Email');
        return false;
    }           
 </script>

Answer 5

Вот рекомендуемый шаблон Regex для HTML5 на MDN:

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

/^[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])?)*$/

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email#Validation

Answer 6

В nodeJS вы также можете использовать модуль узла валидатора и просто так использовать

Установить библиотеку с помощью валидатора npm install

var validator = require('validator');

validator.isEmail('foo@bar.com'); //=> true 

Answer 7

Как насчет создания функции, которая будет проверять любую строку на соответствие шаблону писем с помощью регулярного выражения в JavaScript, поскольку мы знаем, что адреса электронной почты могут сильно различаться в разных регионах, например, в Великобритании и Австралии это обычно заканчивается на .co.uk или .com.au, поэтому я попытался охватить их, а также проверить, передана ли строка в функцию, что-то вроде этого:

var isEmail = function(str) {
  return typeof str==='string' && /^[\w+\d+._]+\@[\w+\d+_+]+\.[\w+\d+._]{2,8}$/.test(str);
}

и проверьте, если это электронная почта, как показано ниже:

isEmail('alex@example.com'); //true
isEmail('alireza@test.co.uk'); //true
isEmail('peter.example@yahoo.com.au'); //true
isEmail('alex@example.com'); //true
isEmail('peter_123@news.com'); //true
isEmail('hello7___@ca.com.pt'); //true
isEmail('example@example.co'); //true
isEmail('hallo@example.coassjj#sswzazaaaa'); //false
isEmail('hallo2ww22@example....caaaao'); //false

Answer 8

Здесь написано несколько сложных RegEx, которые тоже работают.

Я проверил это, и оно тоже работает:

[a-zA-Z0-9._]+[@]+[a-zA-Z0-9]+[.]+[a-zA-Z]{2,6}

Пожалуйста, проверьте это здесь: http://www.regextester.com/?fam=97334

Надеюсь, это поможет.

Answer 9

Теперь ReactNative версии 0.46 Используйте код ниже для проверки электронной почты.

 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,}))$/;
     if (re.test(email)) {
     } else {
       alert('email: ' + "Please enter valid emailID.")
     }
 }

Answer 10

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

$(document).ready(function(){
  $('#submit').on('click', function(){
      var email = $('#email').val();
      var pat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
      if (email.match(pat)){
        $('#email')
          .addClass('input-valid');
        return false;
      } else {
        $('#email')
        	.addClass('input-error')
          .val('');
        return false;
      }
  });
});

.input-error {
  border: 1px solid red;
  color: red;
}

.input-valid {
  border: 1px solid green;
  color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
    <input type="text" id="email" placeholder="name@service.xx" class="">
    <input type="submit" id="submit" value="Send"/>
</form>