Как проверять правильность введённого email с помощью Javascript?

Как проверять правильность введённого email с помощью Javascript?

Очень часто перед отправкой формы на сервер требуется проверить введённые данные, например, ввёл ли пользователь имя, email, установил ли пароль, совпадают ли пароли (если мы говорим про простую форму регистрации). Подобный код проверки может написать даже начинающий JavaScript-разработчик. Сложность может вызывать разве что проверка корректности электронного адреса. Если проверять корректность email с помощью обычных проверок, то на выходе мы увидим некомпактный и неэффективный код, перегруженный множеством операторов if, и не факт, что он будет работать правильно. Например, все мы знаем, что в любом электронном адресе должен быть символ «@» и «.», но если проверить наличие в строке только этих символов, то проверка явно не будет полной. Например, мы не учитываем следующие ошибки:

  • @john.sm@
  • .john@
  • .john@corp.
  • .j@cor.@

Все эти адреса вряд ли можно назвать корректными. Какие есть варианты? Можно проверять, чтобы в строке был только один символ @. Но всё равно есть много неправильных вариантов. Например:

  • john.corp@company
  • джон@corp.com
  • john@corp..

Чтобы не загромождать код лишними проверками, есть один выход - использовать регулярные выражения. Только с помощью регулярных выражений можно быстро и компактно проверить правильность e-mail. Давайте напишем функцию emailValidation(), которая будет проверять правильность ввода электронного адреса:

function emailValidation(value) {

let txt = /^(([^<>()[\]\\.,;:\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 txt.test(value);

}

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

Осталось только написать функцию checkEmail, через которую мы будем передавать содержимое текстового поля email нашей функции emailValidation. Если она возвращает true, мы выводим сообщение ОК, в противном случае сообщаем, что адрес некорректный.

 

function checkEmail() {

let email = document.form.email.value;

if (emailValidation(email)) {

window.alert("OK");

} else {

window.alert("Email is incorrect");

}

}

Можно немного усложнить задачу и проверять адрес на лету, после ввода символов в поле. Поэтому мы перепишем функцию checkEmail так, чтобы оно выводило сообщение о корректности введённого адреса в определённый элемент документа. Результат мы будем выводить в span. Вот изменённый код:

 

function checkEmail() {

let email = document.form.email.value;

if (emailValidation(email)) {

document.getElementById('span1').innerText = 'OK';

} else {

document.getElementById('span1').innerText = 'Email is incorrect';

}

}

 

Логика функции осталась той же, изменился лишь способ отображения результата. Всё остальное — дело техники. Для проверки «на лету» нужно использовать событие onKeyDown для поля ввода:

<input type="text" name="email" id="email" onKeyDown="checkEmail();">

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

 

function phoneValidation(value) {

return /^\+\d{1,2}\(\d{3}\)\d{3}-\d{2}-\d{2}$/.test(value);

}

 

Обратите внимание, что функции проверки email и номера телефона выясняют, соответствуют ли введённые пользователем данные определённому шаблону. Они не проверяют существование такого email и номера телефона. Например, вы можете ввести +55(333)044-99-44. Это корректный номер телефона, т. е. такой номер может существовать, но существует ли — никто не знает. Проверить существование email можно только путём отправки сообщения на этот адрес, но этим никто не занимается. С технической точки зрения реализовать такую проверку можно: отправить email, получить ответ от сервера и выдать результат. Однако подобные проверки порождают ненужный трафик.

Также на некоторых сайтах есть возможность проверки не только корректности введённых данных, но и их допустимости. Например, вы при регистрации ввели email test@mail.ru. С точки зрения функции валидации он является корректным, поскольку соответствует регулярному выражению. Однако этот email может принадлежать другому пользователю, кто уже указал его при регистрации. К сожалению, Javascript не умеет непосредственно обращаться к базе данных, чтобы проверить, есть ли такой email в БД. Поэтому здесь есть два варианта:

  • Остановиться на функции emailValidation и отправлять данные на сервер в случае, если они похожи на правильные. Дальнейшей обработкой будет заниматься программа на сервере (как правило, это скрипт PHP).
  • Использовать технологию AJAX, позволяющую вызвать стороннюю программу для обработки данных. Например, наш сценарий вызовет PHP-скрипт, который проверит, указывался ли такой email при регистрации другого пользователя, и передаст результат проверки нашему JS-сценарию. Наш сценарий на основании полученного ответа выполнит определённые действия (сообщит пользователю, что email занят или свободен).

Популярное

Самые популярные посты

Как быть максимально продуктивным на удалённой работе?
Business

Как быть максимально продуктивным на удалённой работе?

Я запустил собственный бизнес и намеренно сделал всё возможное, чтобы работать из любой точки мира. Иногда я сижу с своём кабинете с большим 27-дюймовым монитором в своей квартире в г. Чебоксары. Иногда я нахожусь в офисе или в каком-нибудь кафе в другом городе.

Привет! Меня зовут Сергей Емельянов и я трудоголик
Business PHP

Привет! Меня зовут Сергей Емельянов и я трудоголик

Я программист. В душе я предприниматель. Я начал зарабатывать деньги с 11 лет, в суровые 90-е годы, сдавая стеклотару в местный магазин и обменивая её на сладости. Я зарабатывал столько, что хватало на разные вкусняшки.

Акция! Профессиональный разработчик CRM за 2000 руб. в час

Выделю время под ваш проект. Знания технологий Vtiger CRM, SuiteCRM, Laravel, Vue.js, Golang, React.js. Предлагаю варианты сотрудничества, которые помогут вам воспользоваться преимуществами внешнего опыта, оптимизировать затраты и снизить риски. Полная прозрачность всех этапов работы и учёт временных затрат. Оплачивайте только рабочие часы разработки после приемки задачи. Экономьте на платежах по его содержанию разработчика в штате. Возможно заключение договора по ИП. С чего начать, чтобы нанять профессионального разработчика на full-time? Просто заполните форму!

Telegram
@sergeyem
Telephone
+4915211100235