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

Когда-то я написал статью о том как создать форму регистрации и авторизации, но там проверка занятости почтового адреса делается только после того как нажали на кнопку "Зарегистрироваться".

В этой статье мы реализуем проверку на занятость почтового адреса, используя технологию Ajax, которая позволяет отправить данные на сервер без перезагрузки страницы. То есть с помощью Ajax мы сможем сразу проверить, занят ли введенный почтовый адрес или нет.

Создайте новую базу данных и после скачивания архива, сделайте импорт файла 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.

Похожие статьи:

• Как сделать форму регистрации и авторизации на сайте
• Подтверждение email
• Восстановление пароля
• Как реализовать функционал запомнить меня