• Главная
  •  > 
  • Интернет
  •  > 
  • Jquery формы регистрации и авторизации. Пошаговая регистрация средствами jQuery

Jquery формы регистрации и авторизации. Пошаговая регистрация средствами jQuery

3.8 из 5

Буэнос диаз, амигос!

Сегодня мы с вами сделаем необычную форму регистрации-авторизации-напоминания пароля.

Использовать будем jQuery и jQuery easing plugin, который расширяет возможности анимации jQuery. Об этом плагине мы уже писали. Сейчас же будем использовать на реальном примере.

NB. У этой статьи есть .

Суть того, что я хочу сделать заключается в следующем. Все три формы: регистрация, авторизация и напоминание пароля — на странице есть. Но две из них не видны. При клике на соответствующую псевдоссылку (про ссылки всем советую прочитать статью Павла Марковнина) появляется нужная форма.

В общем-то смотрим пример, и все станет понятно:

HTML и CSS

Код страницы будет выглядеть примерно следующим образом:

следующие строчки в css

делают возможным следующую картинку в браузере:

Каждый loginBlock содержит в себе инпуты, кнопки и блоки для показа ошибок. Взглянем на signin:

Блок #error1 изначально невидим и пуст. Если валидация полей не будет пройдена, мы будем его заполнять текстом ошибки и показывать.

JavaScript

Первое, что мы делаем — на $(document).ready() вешаем обработчики кликов на псевдоссылки. У нас имеется три пары ссылок, которые должны приводить к одному и тому же результату, каждая пара имеет свой класс. По нему-то мы и будем искать ссылки:

$(document).ready(function() {
$("a.remindPass").click(function(e) {
e.preventDefault();
GoTo(2);
});
$("a.signin").click(function(e) {
e.preventDefault();
GoTo(1);
});
$("a.signup").click(function(e) {
e.preventDefault();
GoTo(0);
});
});

Функция GoTo(num) будет перематывать #wr на нужное значение левого отступа. Здесь всплывает использование плагина jQuery easing:

Function GoTo(num) {
margin = num * 382;
$("#wr").animate({ marginLeft: -margin },
{ duration: 800, easing: "easeInOutBack" });
}

382px — ширина одного.loginBlock"a с учетом всех отступов и бордеров.

Для каждой кнопки действий - регистрации, авторизации и отправки пароля на почту, мы напишем функцию обработчика клика. Здесь приведу только один пример. Остальные можно увидеть в js-файле (ссылка на архив будет внизу статьи).

Function SignUp() {
email = $("#email").val();
pass = $("#password").val();
passAgain = $("#passwordAgain").val();
if (!ValidEmail(email)) {
ShowError(0);
}
else {
if ((pass!="")&&(pass == passAgain)) {
if (!UserWithEmailExists(email)) {
//Register User
HideError()
}
} else {
ShowError(1);
}
}
}

Функция UserWithEmailExists(email) должна отправлять запрос к серверу, чтобы узнать, есть ли пользователь с таким емэйлом в системе. Если есть, то возвращать true, в противном случае false.

Теперь поговорим про показ ошибок и неошибок. Выглядеть это должно примерно так:

Ошибка валидации емэйла:

Ошибка совпадения паролей:

Неошибка:

Для каждой ошибки имеется код, каждая ошибка соответствует своей форме, поэтому можно завести следующий список констант:

Var er0 = "Неправильный формат email"a"; //0
var er1 = "Пароли не совпадают"; //0
var er2 = "Пользователь с таким email"ом уже зарегистрирован"; //0
var er3 = "Не угадали пароль. Или email. Попробуйте еще раз"; //1
var er4 = "Пользователя с таким email"oм у нас еще нету"; //2
var er5 = "Неправильный формат email"a"; //2

А сам показ ошибок реализует следующая функция:

Function HideError() {
$(".error").hide();
}
function ShowError(code) {
HideError();
switch (code) {
case 0:
$("#error0").html(er0).slideDown();
break;
case 1:
$("#error0").html(er1).slideDown();
break;
case 2:
$("#error0").html(er2).slideDown();
break;
case 3:
$("#error1").html(er3).slideDown();
break;
case 4:
$("#error2").html(er4).slideDown();
break;
case 5:
$("#error2").html(er5).slideDown();
break;
}
}

Аналогичным образом реализуется показ неошибок.

В сети Twitter Вы можете наблюдать работу страницы с чистым и простеньким дизайном. Посмотрите на правую верхнюю часть страницы, там Вы увидите кнопку авторизации в систему, нажав на которую, вы увидите формы для заполнения данных. Сегодня мы расскажем Вам о том, как сделать подобный эффект на собственном сайте. На самом деле, это очень просто. К тому же, это поможет Вам сохранить место на странице, и прибавит ощущения комфорта Вашим посетителям. В этой статье мы пошагово расскажем Вам о том, как работает вся эта система, а еще это руководство будет полезным для тех, кто желает изучить jQuery . Вперед!

Код HTML

Для начала нужно начать с кода HTML. HTML-код очень простенький - он содержит в себе тэг «a», который идет вместе с тэгом «fieldset», за счет которого отображается форма.

Просто скопируйте это в код новой страницы:


Have an account? Sign in


Username or email


Password




Remember me


Forgot your password?


Forgot your username?






Код CSS

Вам потребуется использование CSS для определения кнопки авторизации и формы логина. Представленный ниже код выполняют именно эту функцию.

Просто скопируйте этот код в Ваш файл css, или добавьте его в код HTML там, где у Вас определяется стиль. Эти коды определяют кнопку авторизации.

#container {
width:780px;
margin:0 auto;
position: relative;
}

#content {
width:520px;
min-height:500px;
}
a:link, a:visited {
color:#27b;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
a img {
border-width:0;
}
#topnav {
padding:10px 0px 12px;
font-size:11px;
line-height:23px;
text-align:right;
}
#topnav a.signin {
background:#88bbd4;
padding:4px 6px 6px;
text-decoration:none;
font-weight:bold;
color:#fff;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
*background:transparent url("images/signin-nav-bg-ie.png") no-repeat 0 0;
*padding:4px 12px 6px;
}
#topnav a.signin:hover {
background:#59B;
*background:transparent url("images/signin-nav-bg-hover-ie.png") no-repeat 0 0;
*padding:4px 12px 6px;
}
#topnav a.signin, #topnav a.signin:hover {
*background-position:0 3px!important;
}

a.signin {
position:relative;
margin-left:3px;
}
a.signin span {
background-image:url("images/toggle_down_light.png");
background-repeat:no-repeat;
background-position:100% 50%;
padding:4px 16px 6px 0;
}
#topnav a.menu-open {
background:#ddeef6!important;
color:#666!important;
outline:none;
}
#small_signup {
display:inline;
float:none;
line-height:23px;
margin:25px 0 0;
width:170px;
}
a.signin.menu-open span {
background-image:url("images/toggle_up_dark.png");
color:#789;
}

И дальше идет определение формы логина:

#signin_menu {
-moz-border-radius-topleft:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
display:none;
background-color:#ddeef6;
position:absolute;
width:210px;
z-index:100;
border:1px transparent;
text-align:left;
padding:12px;
top: 24.5px;
right: 0px;
margin-top:5px;
margin-right: 0px;
*margin-right: -1px;
color:#789;
font-size:11px;
}

#signin_menu input, #signin_menu input {
display:block;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border:1px solid #ACE;
font-size:13px;
margin:0 0 5px;
padding:5px;
width:203px;
}
#signin_menu p {
margin:0;
}
#signin_menu a {
color:#6AC;
}
#signin_menu label {
font-weight:normal;
}
#signin_menu p.remember {
padding:10px 0;
}
#signin_menu p.forgot, #signin_menu p.complete {
clear:both;
margin:5px 0;
}
#signin_menu p a {
color:#27B!important;
}
#signin_submit {
-moz-border-radius:4px;
-webkit-border-radius:4px;
background:#39d url("images/bg-btn-blue.png") repeat-x scroll 0 0;
border:1px solid #39D;
color:#fff;
text-shadow:0 -1px 0 #39d;
padding:4px 10px 5px;
font-size:11px;
margin:0 5px 0 0;
font-weight:bold;
}
#signin_submit::-moz-focus-inner {
padding:0;
border:0;
}
#signin_submit:hover, #signin_submit:focus {
background-position:0 -5px;
cursor:pointer;
}

Пришло время поработать с javascript

Казалось бы, коды HTML и CSS достаточно сложные и запутанные, а в javascript все очень просто. Просто копируйте этот код javascript, за счет которого можно будет отображать и прятать форму в момент клика по кнопке авторизации, даже если клик будет произведен вне формы логина.



$(document).ready(function() {

$(".signin").click(function(e) {
e.preventDefault();
$("fieldset#signin_menu").toggle();
$(".signin").toggleClass("menu-open");
});

$("fieldset#signin_menu").mouseup(function() {
return false
});
$(document).mouseup(function(e) {
if($(e.target).parent("a.signin").length==0) {
$(".signin").removeClass("menu-open");
$("fieldset#signin_menu").hide();
}
});

});

Согласно коду, представленному выше, когда посетитель кликает по кнопке авторизации, запускается новая функция. Сначала отображается форма логина (заключенная в тэг «filedset»), затем ссылка, заключенная в класс «.signin», добавляет еще один класс «menu-open», за счет которого сменяется фоновое изображение.

Еще одно событие в этом коде заключается в том, что когда посетители кликают не по форме логина, а где-то на странице – то форма сама закрывается. Другими словами, класс «menu-open» снимается с ссылки с классом «.signin» и возвращает ей первоначальное фоновое изображение.

Что касается подсказок?


$(function() {
$("#forgot_username_link").tipsy({gravity: "w"});
});

Мы обычно советуем использовать плагин для jQuery – tipsy . Содержимое tooltip-а представляет собой то, что написано в атрибуте «title», относящемся к ссылке. Вы можете менять позицию tooltip-а относительно востока, запада, юга или севера. Это реализуется за счет параметра «gravity», указанного в коде выше. Мы предоставляем Вам ссылку на сайт, посвященный этому плагину, там Вы сможете более подробно изучить его возможности и скачать плагин. …

В заключение

Если Вы скопировали весь код с этой статьи, пожалуйста, не меняйте структуру папок. Если Вы измените ее, то код не будет работать. Данный код является лишь примером создания выпадающей формы авторизации с помощью jQuery . Удачи в практике!

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

Вероятно, вы хотели бы увидеть более современный способ создания такой формы. Полное его современное и актуальное представление у меня пока что еще в планах, но зато вы можете увидеть, что форму обратной связи можно построить с помощью объектно-ориентированных приемов в PHP.

Для начала давайте оговорим все шаги, которые сделаем далее. Что нам вообще нужно? Нам нужен сценарий, который будет регистрировать пользователя, авторизовать пользователя, переадресовывать пользователя куда-либо после авторизации. Также нам нужно будет создать страницу, которая будет защищена от доступа неавторизованных пользователей. Для регистрации и авторизации нам необходимо будет создать HTML -формы. Информацию о зарегистрированных пользователях мы будем хранить в базе данных. Это значит, что нам еще нужен скрипт подключения к СУБД . Всю работу у нас будут выполнять функции, которые мы сами напишем. Эти функции мы сохраним в отдельный файл.

Итак, нам нужны следующие файлы:

  • соединение с СУБД;
  • пользовательские функции;
  • авторизация;
  • регистрация;
  • защищенная страница;
  • сценарий завершения работы пользователя;
  • сценарий, проверяющий статус авторизации пользователя;
  • таблица стилей для простейшего оформления наших страниц.

Всё это будет бессмысленно, если у вас нет соответствующей таблицы в базе данных. Запустите инструмент управления своим СУБД (PhpMyAdmin или командную строку, как удобнее) и выполните в нем следующий запрос:

CREATE TABLE `users` (`id` int(11) NOT NULL AUTO_INCREMENT, `login` char(16) NOT NULL, `password` char(40) NOT NULL, `reg_date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (`id`)) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

Наши файлы со сценариями я назову так (все они будут лежать в одном каталоге):

  • database.php;
  • functions.php;
  • login.php;
  • registration.php;
  • index.php;
  • logout.php;
  • checkAuth.php;
  • style.css.

Назначение каждого из них, я уверен, вам понятно. Начнем со скрипта соединения с СУБД. Вы его уже видели . Просто сохраните код этого скрипта в файле с именем database.php . Пользовательские функции мы будем объявлять в файле functions.php . Как это всё будет работать? Неавторизованный пользователь пытается получить доступ к защищенному документу index.php , система проверяет авторизован ли пользователь, если пользователь не авторизован, он переадресовывается на страницу авторизации. На странице авторизации пользователь должен видеть форму авторизации. Давайте сделаем её.

Авторизация пользователей Ваш логин: Ваш пароль:

зарегистрируйтесь.

Теперь нашей форме нужно придать некий вид. Заодно определим правила для других элементов. Я, забегая вперед, приведу содержимое таблицы стилей полностью.

/* файл style.css */ .row { margin-bottom:10px; width:220px; } .row label { display:block; font-weight:bold; } .row input.text { font-size:1.2em; padding:2px 5px; } .to_reg { font-size:0.9em; } .instruction { font-size:0.8em; color:#aaaaaa; margin-left:2px; cursor:default; } .error { color:red; margin-left:3px; }

Если всё сделано верно, у вас в броузере должно быть следующее:

Конечно же у нас нет пока ни одного зарегистрированного пользователя, и чтобы авторизоваться, нужно зарегистрироваться. Давайте сделаем форму регистрации.

Регистрация пользователей Укажите ваш логин: Регистрация пользователей Укажите ваш логин: