Определение доступности имени пользователя при регистрации
Определение доступности имени пользователя при регистрации
Итак. Суть в том, что пользователь при регистрации вводит желаемый логин - переключается на следующее поле, а рядом с полем для логина всплывёт результат. Если такой логин уже есть в системе - тогда нам выдаст соответствующее оповещение... Однако, мы не остановимся и сделаем то же самое для кошелька и 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качиваем архив и кидаем файлы в корень.

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





Рубрика: Бесплатное » Дополнения   |   Автор: Alex   |   Просмотры: 6109
Комментариев: 36
Публикаций: 0
ICQ: 607084902
- 2 +
  Автор: admin166   |   Группа: Пользователи   |   Дата: 09 марта 2011  
Спасибо! Поставил,все реально работает!
Комментариев: 8
Публикаций: 0
ICQ: --
- -3 +
  Автор: 123456   |   Группа: Пользователи   |   Дата: 29 июля 2011  
хорошая статья)
Комментариев: 28
Публикаций: 4
ICQ: --
- 7 +
  Автор: KPEKEP   |   Группа: Пользователи   |   Дата: 13 августа 2011  
У меня такого НЕТУ хотя и стоит обычный сооофаст
Внимание! У вас нет прав для просмотра скрытого текста.
Комментариев: 31
Публикаций: 0
ICQ: 412467057
- 3 +
  Автор: Metallist95   |   Группа: Пользователи   |   Дата: 01 февраля 2012  
у меня тоже нету!!! angry

автор, ты хотя бы писал, что это только для jquery facepalm
Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.