Простая валидация email с помощью javaScript. Суть в том, чтобы не дать отправить форму, пока не будет правильно введен email.
Форма обязательно должна валидироваться еще и на сервере, иначе, отключив javaScript можно отправить любое содержимое вместо email.
Простой пример HTML (поле для ввода, кнопка и сообщение для вывода ошибки):
<form class="form" action="javascript:void(0)"> <div class="form-row"> <div class="form-col"> <input type="text" class="email" placeholder="E-mail"> <span class="error"></span> </div> </div> <button type="submit" class="btn-submit">Get Discount</button> </form>
Функционал данной задачи поместился в 3 небольших функции. Код javaScript:
$(function() { $(".btn-submit").on("click", validate); // Validate email function validateEmail(email) { var re = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/; return re.test(String(email).toLowerCase()); } // send form function sendForm() { $(".error").text("Form sending").fadeIn(); } // validate email and send form after success validation function validate() { var email = $(".email").val(); var $error = $(".error"); $error.text(""); if (validateEmail(email)) { $error.fadeOut(); sendForm(); } else { $error.fadeIn(); $error.text(email + " is not valid"); } return false; } });
Рассмотрим чуть подробнее скрипт.
function validateEmail(email)
– функция, которая проверяет соответствие строки email
регулярному выражению, указанному в переменной re
. В переменной re
задана регулярка для шаблона email-почты.
function sendForm()
– простой пример, чтобы показать, что форма отправлена, в рабочем примере здесь будет сообщение об успешной отправке и отправка формы.
function validate()
– функция которая будет вызвана после нажатия на кнопку ".btn-submit"
. Будет провалидирован введенный в поле email, если он не соответствует регулярному выражению, то появится сообщение об ошибке, а если почта валидна, то форма будет отправлена и мы получим уведомление об успешной отправке почты.
Пример работы валидации email:
See the Pen simple validation email by javascript by Denis (@deniscreative) on CodePen.default
Больше примеров regular expresion для email можно найти здесь.