Простая валидация 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 можно найти здесь.
Комментарии (7) к “Валидация email с помощью javaScript”
Дмитрий
Спасибо за интересный и полезный сайт.
Denis Creative
Бальзам на душу, когда кто-то находит полезную информацию для себя на моем сайте))
Денис
Отвратительная регулярка, можно написать текст@текст. И после точки можно писать все что хочешь. Да и до неё и до собаки любые символы, все что душе угодно.
Denis Creative
предложите лучше
Denis Creative
текст@текст is not valid
Иван
Вот ещё ссылка на валидатор с регулярным выражением, которое исключает двойной @, две “.” подряд и дополнительные символы в начале строки («.», «-», «!» и т. д.):
https://stackoverflow.com/a/70295931/4569501
Denis Creative
Спасибо, протестирую.