Определение доступности имени пользователя при регистрации

Ребята с форума завели тему насчёт этой фичи – вот я и решил выложить… За одно для себя взял пару уроков.

Итак. Суть в том, что пользователь при регистрации вводит желаемый логин – переключается на следующее поле, а рядом с полем для логина всплывёт результат. Если такой логин уже есть в системе – тогда нам выдаст соответствующее оповещение… Однако, мы не остановимся и сделаем то же самое для кошелька и WMID\’а.Итак. Суть в том, что пользователь при регистрации вводит желаемый логин – переключается на следующее поле, а рядом с полем для логина всплывёт результат. Если такой логин уже есть в системе – тогда нам выдаст соответствующее оповещение… Однако, мы не остановимся и сделаем то же самое для кошелька и WMID\’а.

Поехали…

То что вы видите на скрине – это было до написания статьи. Пока я писал – я параллельно сделал и для WMID и для кошелька такую примочку.

Делаем всё просто:

1. Открываем register.php и перед:

<form action="register.php" method="POST">


Добавим:

<!–проверка–>
<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("log_exists.php",{ username:$(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);
});
}

});

});
//для вмид

$("#wmid").blur(function()
{
$("#msgwmidbox").removeClass().addClass('messagebox').text('Проверка…').fadeIn("slow");
//Проверить существует ли имя
$.post("log_exists.php",{ wmid:$(this).val() } ,function(data)
{
if(data=='no') //если имя не доступно
{
$("#msgwmidbox").fadeTo(200,0.1,function() //начнет появляться сообщение
{
$(this).html('Пользователь с таким WMID уже зарегистрирован').addClass('messageboxerror').fadeTo(900,1);
});
}
else
{
$("#msgwmidbox").fadeTo(200,0.1,function()
{
//тут прописывается сообщение о доступности имени
$(this).html('WMID доступен для регистрации').addClass('messageboxok').fadeTo(900,1);
});
}

});

});

//для кошелька

$("#pemail").blur(function()
{
$("#msgpursebox").removeClass().addClass('messagebox').text('Проверка…').fadeIn("slow");
//Проверить существует ли имя
$.post("log_exists.php",{ purse:$(this).val() } ,function(data)
{
if(data=='no') //если имя не доступно
{
$("#msgpursebox").fadeTo(200,0.1,function() //начнет появляться сообщение
{
$(this).html('Пользователь с таким кошельком уже зарегистрирован').addClass('messageboxerror').fadeTo(900,1);
});
}
else
{
$("#msgpursebox").fadeTo(200,0.1,function()
{
//тут прописывается сообщение о доступности имени
$(this).html('WM-кошелёк доступен для регистрации').addClass('messageboxok').fadeTo(900,1);
});
}

});

});
});

</script>
<style>
.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;
}</style>
<!–подключили–>


Это мы намутили яваскрипт и прописали стили. Всё делаем, как в том уроке.

Следующий шаг:

2. В этом же файле находим:

<input size="15" maxlength="25" name="username" autocomplete="off" value="" tabindex="1" type="text">


Меняем на:

<input size="15" maxlength="25" name="username" id="username" autocomplete="off" value="" tabindex="1" type="text"> <span id="msgbox" style="display:none"></span>


Затем ниже находим:

<input size="25" maxlength="13" name="pemail" autocomplete="off" class="field" value="" tabindex="1" type="text">


Меняем на:

<input size="25" maxlength="13" name="pemail" autocomplete="off" class="field" value="" tabindex="1" type="text" id="pemail"><span id="msgpursebox" style="display:none"></span>


И наконец ниже найдём:

<input size="25" maxlength="12" name="wmid" autocomplete="off" class="field" value="" tabindex="1" type="text">


И сменим на:

<input size="25" maxlength="12" name="wmid" autocomplete="off" class="field" value="" id="wmid" tabindex="1" type="text"><span id="msgwmidbox" style="display:none"></span>


Что мы сделали?

Добавляем к коду каждого поля ввода (инпуту) id, по которому яваскрпит берёт у нас значение. Ну и само собой после каждого инпута мы добавили поле для вывода результата.

3. Cкачиваем архив и кидаем файлы в корень.

Всё. С вас комменты…

Автор публикации

не в сети 9 лет

Alex

Комментарии: 0Публикации: 166Регистрация: 19-02-2011

Понравилась статья? Поделись в соц. сетях:

Похожие новости

Добавить комментарий

Авторизация
*
*
Регистрация
*
*
*
Генерация пароля