Главная JavaScript Проверка адреса электронной почты

Проверка адреса электронной почты

1. Проверка корректности ввода адреса электонной почты
с помощью скрипта

В приведеннном Примере по щелчку по кнопке формы срабатывает событие onclick и
с помощью JavaScript вызывается функция с именем postEmail().

Функция проверяет, корректно ли введен адрес электронной почты.
При этом выводится сообщение об ошибке или наоборот, правильности ввода данных.

Для валидации (проверки правильности) заполнения адреса электронной почты
используется регулярное выражение (шаблон):

Регулярное выражение для адреса электронной почты:

/^[^\s()<>@,;:\/]+@\w[\w\.-]+\.[a-z]{2,}$/i

или

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

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

Введите адрес электронной почты и нажмите кнопку «Проверить»

 

1
<script>
  function postEmail() {
    var str = document.getElementById("email").value;
    var status = document.getElementById("status");
    var re = /^[^\s()<>@,;:\/]+@\w[\w\.-]+\.[a-z]{2,}$/i;
    if (re.test(str)) status.innerHTML = "Адрес правильный";
      else status.innerHTML = "Адрес неверный";
    if(postEmpty(str)) status.innerHTML = "Поле пустое";
  }
  function postEmpty(str){
    return (str == null) || (str.length == 0);
  }
</script>
 
<body>
  <form action="">
   Введите адрес электронной почты и нажмите кнопку «Проверить»
   <input type="text" id="email"> <span id="status"></span>
   <input type="button" value="Проверить" onclick="isEmail()">
  </form>
</body>

2. Проверка корректности ввода адреса электонной почты
с помощью pattern

PATTERN (шаблон ввода) - атрибут элемента формы input.

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

С помащью pattern проверяются простые поля формы.

Ниже дается Пример 2 проверки адреса электонной почты с помощью простого
pattern="[a-zA-Z0-9._%+-]+@[a-z0-9.-]+\.[a-zA-Z]{2,4}", который проверяет ввод символов: @, точку и 2-4 символа после точки.

2
Контактная информация 

<form action="test.php" style="width: 300px;">
<fieldset>
  <legend class="green">Контактная информация</legend>
  <p>Введите ваш email:</p>
  <p><input type="email" pattern="[a-zA-Z0-9._%+-]+@[a-z0-9.-]+\.[a-zA-Z]{2,4}" title="text@text.2-4 символа" placeholder="email" required></p>
    <p><input type="submit" value="Отправить">
    <input type="reset" value="Очистить"></p>
</fieldset>    
</form>