Как проверить email на занятость, используя технологию Ajax

Оглавление:
Когда-то я написал статью о том как создать форму регистрации и авторизации, но там проверка занятости почтового адреса делается только после того как нажали на кнопку "Зарегистрироваться".
В этой статье мы реализуем проверку на занятость почтового адреса, используя технологию Ajax, которая позволяет отправить данные на сервер без перезагрузки страницы. То есть с помощью Ajax мы сможем сразу проверить, занят ли введенный почтовый адрес или нет.
Архив с файлами форм регистрации и авторизации, созданные в статье как создать форму регистрации и авторизации, можете скачать по этой ссылке.
Замечание! После скачивания архива с исходными файлами статьи, не забудьте поменять данные для подключения к базе данных и изменить адрес сайта из переменной $address_site. Всё это нужно сделать в файле dbconnect.php.
Создайте новую базу данных и после скачивания архива, сделайте импорт файла testsite.sql, который находится в папке baza-dannih. В результате чего в созданную базу должно появиться таблица users, где будем добавлять наших новых пользователей.
Идем дальше. В файле header.php, внутри тега head, у нас уже реализована проверка почтового адреса на корректность. То есть проверяется, если пользователь ввел email в соответствующем формате, а не какую-ту билибирду.
Для начала изменим немного существующий код проверки email. Переменную mail, заменим на конструкцию $(this) и уберем лишние строчки из условии if($(this).val().search(pattern) == 0), вот эти:
// Убираем сообщение об ошибке $('#valid_email_message').text('');
И еще, в блоках else, у селектора $('#valid_email_message') заменим метод text() на метод html(). Это делается для того чтобы была возможность добавить внутри элемента span с id = "valid_email_message", текст вместе с html кодом. Это позволяет вывести успешные сообщения зеленым цветом, а сообщения об ошибках красным цветом.
Было так:
var mail = $('input[name=email]'); mail.blur(function(){ if(mail.val() != ''){ // Проверяем, если введенный email соответствует регулярному выражению if(mail.val().search(pattern) == 0){ // Убираем сообщение об ошибке $('#valid_email_message').text(''); //Активируем кнопку отправки $('input[type=submit]').attr('disabled', false); }else{ //Выводим сообщение об ошибке $('#valid_email_message').text('Не правильный Email'); // Дезактивируем кнопку отправки $('input[type=submit]').attr('disabled', true); } }else{ $('#valid_email_message').text('Введите Ваш email'); } });
После внесения изменений стало так:
$('input[name=email]').blur(function(){ if($(this).val() != ''){ // Проверяем, если введенный email соответствует регулярному выражению if($(this).val().search(pattern) == 0){ // Место для отправки значения поля email на сервер, через Ajax //Активируем кнопку отправки $('input[type=submit]').attr('disabled', false); }else{ //Выводим сообщение об ошибке $('#valid_email_message').html('<span class="mesage_error">Не правильный Email</span>'); // Дезактивируем кнопку отправки $('input[type=submit]').attr('disabled', true); } }else{ $('#valid_email_message').html('<span class="mesage_error">Введите Ваш email</span>'); } });
Теперь для того чтобы все сообщения не вывелись красным цветом, в файле form_register.php, уберём класс message_error, у тега span который имеет id = "valid_email_message".
Возвращаемся в файл header.php, и внутри условии if($(this).val().search(pattern) == 0), в указанное место, добавляем код отправки значения поля email на сервер, через Ajax.
// Место для отправки значения поля email на сервер, через Ajax $.ajax({ // Название файла, в котором будем проверять email на существование в базе данных url: "check_email.php", // Указывываем каким методом будут переданы данные type: "POST", // Указывываем в формате JSON какие данные нужно передать data: { email: $(this).val() }, // Тип содержимого которого мы ожидаем получить от сервера. dataType: "html", // Функция которая будет выполнятся перед отправкой данных beforeSend: function(){ $('#valid_email_message').text('Проверяется...'); }, // Функция которая будет выполнятся после того как все данные будут успешно получены. success: function(data){ //Полученный ответ помещаем внутри тега span $('#valid_email_message').html(data); } });
В значении свойства url, мы указали название php файла, который и будет заниматься проверкой занятости введенного почтового адреса в базе данных.
Теперь необходимо создать данный файл, с именем check_email.php и добавить в него этот код:
<?php //Добавляем файл подключения к БД require_once("dbconnect.php"); if(isset($_POST["email"])) { $email = trim($_POST["email"]); $email = htmlspecialchars($email, ENT_QUOTES); //Проверяем, нет ли уже такого адреса в БД. $result_query = $mysqli->query("SELECT `email` FROM `users` WHERE `email`='".$email."'"); //Если кол-во полученных строк ровно единице, значит, пользователь с таким почтовым адресом уже зарегистрирован if($result_query->num_rows == 1){ echo "<span class='mesage_error'>Пользователь с таким почтовым адресом уже зарегистрирован</span>"; }else{ echo "<span class='success_message'>Почтовый адрес свободен</span>"; } // закрытие выборки $result_query->close(); } ?>
В этом файле check_email.php мы сначала добавляем файл подключения с базой данных. Потом проверяем если в глобальном массиве POST, существует ячейка email, то мы обрабатываем ее значение и составляем запрос к БД.
Этот запрос выбирает из базы того пользователя, у которого почтовый адрес равен с введенным почтовым адресом.
Дальше мы проверяем, если кол-во записей, полученных в результате запроса равно единице, значит, пользователь с таким почтовым адресом уже существует в базе данных, иначе введенный почтовый адрес свободен.
Для каждого случая мы возвращаем с помощью оператора echo, в ajax, соответствующее сообщение, которая попадает в параметре data, функции из свойства success.
И это сообщение из параметра data, мы помещаем внутри тега span, с id = "valid_email_message".
Полученный ответ в случае, когда указанный почтовый адрес занят:

И ответ, полученный в случае, когда указанный почтовый адрес свободен:

На этом все. Теперь Вы знаете, как проверить email на занятость, используя технологию Ajax.
Замечание! После скачивания архива с исходными файлами статьи, не забудьте поменять данные для подключения к базе данных и изменить адрес сайта из переменной $address_site. Всё это нужно сделать в файле dbconnect.php.
Видео:
Похожие статьи:
Понравилась статья?
Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи.
Поделиться с друзьями:
Подписаться на новые статьи:
Поддержите пожалуйста мой проект!
Если у Вас есть какие-то вопросы или предложения, то можете писать их в комментариях или мне на почту sergiu1607@gmail.com. И если Вы заметили какую-то ошибку в статье, то прошу Вас, сообщите мне об этом, и в ближайшее время я всё исправлю.
Добавляйтесь ко мне в друзья в:
Добавляйтесь в мои группы:
Подпишитесь на мои каналы:
Автор статьи: Мунтян Сергей
Копирование материалов с сайта sozdatisite.ru ЗАПРЕЩЕНО!!!
Дата добавления: 2017-12-01 11:54:37