Сегодня я расскажу Вам как с помощью PHP и Ajax сделать простую и красивую проверку доступности имени пользователя.
Данный функционал пригодится многим при создании сайтов с большим количеством пользователей. При вводе желаемого имени пользователя рядом с полем ввода появляется красивая надпись, которая свидетельствует о доступности или недоступности данного имени.
Для начала нам необходимо создать страничку, где будет находиться форма.
Между тегами <body></body> необходимо поместить следующий код:
<script src="jquery.js" type="text/javascript" language="javascript"></script>
<script language="javascript">
$(document).ready(function()
{
$("#username").blur(function()
{
$("#msgbox").removeClass().addClass('messagebox').text('Проверка...').fadeIn("slow");
//Проверить существует ли имя
$.post("user_availability.php",{ user_name:$(this).val() } ,function(data)
{
if(data=='no') //если имя не доступно
{
$("#msgbox").fadeTo(200,0.1,function() //начнет появляться сообщение
{
$(this).html('Это имя уже занято').addClass('messageboxerror').fadeTo(900,1);
});
}
else
{
$("#msgbox").fadeTo(200,0.1,function()
{
//тут прописывается сообщение о доступности имени
$(this).html('Имя доступно для регистрации').addClass('messageboxok').fadeTo(900,1);
});
}
});
});
});
</script>
В данном коде мы подключили фреймворк jQuery и прописали тексты и эффекты для сообщений о доступности\недоступности имен.
Далее нам необходимо создать форму:
<div >
User Name : <input name="username" type="text" id="username" value="" maxlength="15" />
<span id="msgbox" style="display:none"></span>
</div>
Все предельно просто. Кроме поля для ввода еще добавили место для сообщения о доступности имени и обрамили тегами <span>.
Ниже представлены стили оформления, которые были использованы в примере. Их можно использовать как в том же документе, так и вынести в отдельный файл.
.messagebox{
position:absolute;
width:100px;
margin-left:30px;
border:1px solid #c93;
background:#ffc;
padding:3px;
}
.messageboxok{
position:absolute;
width:auto;
margin-left:30px;
border:1px solid #349534;
background:#C9FFCA;
padding:3px;
font-weight:bold;
color:#008000;
}
.messageboxerror{
position:absolute;
width:auto;
margin-left:30px;
border:1px solid #CC0000;
background:#F7CBCA;
padding:3px;
font-weight:bold;
color:#CC0000;
}
Теперь давайте взглянем на PHP код, который делает всю работу. Этот код, необходимо вставить в отдельный файл. В нашем примере он называется user_availability.php.
<?php
//это переменная содержит имена существующих пользователей
$existing_users=array('roshan','mike','jason');
$user_name=$_POST['user_name'];
//проверка существует ли пользователь в массиве $existing_users
if (in_array($user_name, $existing_users))
{
//юзер недоступен
echo "no";
}
else
{
//доступен
echo "yes";
}
?>
Как Вы видите в нашем примере все существующие имена пользователя находятся в массиве. Скрипт проверяет его и выдает результат. Если модифицировать данный скрипт, то можно выполнять проверку из любой базы данных.
На сегодня все! Надеюсь, Вам понравился сегодняшний урок :) Это ведь только начало - впереди нас ждет еще много всего интересного и познавательного.
З.Ы. не забывайте пользоваться кнопкой добавления в закладки (ее Вы можете найти снизу). Добавляя в закладки наши уроки Вы помогаете развитию нашего замечательного сайта. На некоторых сайтах, для добавления закладок необходима регистрация - надеюсь, Вы не поленитесь :) Заранее всех благодарю!