Основное меню

Создание формы для авторизации пользователей

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

Давайте поподробнее рассмотрим конфигурационный файл.

Первое, вносим в массив блоки, которые используются в скрипте:

var blocks = [];
blocks[0] = "#signup";
blocks[1] = "#signin";
blocks[2] = "#remindPass";
cur = 1;

На каждой из трех HTML-документов внесены DIV-блоки, имеющие "ID-названия", которые были указаны выше:

<div class='loginBlock' id="signup" style="visibility: hidden">

<div class='loginBlock' id="signin" style="visibility: hidden">

<div class='loginBlock' id="remindPass">

Теперь нужно привязать события к кликам по псевдо-ссылкам, чтобы это было более лаконично. Для этого определяем, что JS-скрипт должен сработать исходя из параметра "href" ссылки:

$(document).ready(function() {
$('.additional a').click(function(e) {
e.preventDefault();
var x;
switch ($(this).attr('href')) {
case ("signup.html"):
x = 0;
break;
case ("index.html"):
x = 1;
break;
case ("remind.html"):
x = 2;
break;
};
$(blocks[x]).css({ 'visibility': 'visible' });
GoTo(x);
});

$('#loginEmail').focus();
});

Следующим шагом будет создание фокуса для первого текстового поля, после перехода на следующую форму:

function GoTo(num) {
margin = num * 382;
$('#wr').animate(
{ marginLeft: -margin }, 800, 'easeInOutBack', function() {
switch (num) {
case 0:
$('#email').focus();
break;
case 1:
$('#loginEmail').focus();
break;
case 2:
$('#remindEmail').focus();
break;
};
$(blocks[cur]).css({ 'visibility': 'hidden' });
cur = num;
});
}

Теперь нужно внести в массив значение, которые будут выводится при ошибках:

var er = [];
er[0] = "Неправильный формат email'a"; //0
er[1] = "Пароли не совпадают"; //0
er[2] = "Пользователь с таким email'ом уже зарегистрирован"; //0
er[3] = "Пароль или email, введены неверно. Попробуйте еще раз"; //1
er[4] = "Введенный email свободен"; //2
er[5] = "Неправильный формат email'a"; //2

Далее, нужно сформировать функцию, которая будет обрабатывать ввод и вывод ошибочных сообщений, указанных выше:

function HideError() {
$('.error').hide();
}

function ShowError(code) {
HideError();
switch (code) {
case 0:
$('#error0').html(er[0]).slideDown();
$('#email').select().focus();
break;
case 1:
$('#error0').html(er[1]).slideDown();
break;
case 2:
$('#error0').html(er[2]).slideDown();
break;
case 3:
$('#error1').html(er[3]).slideDown();
break;
case 4:
$('#error2').html(er[4]).slideDown();
break;
case 5:
$('#error2').html(er[5]).slideDown();
break;
}
}

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

Скрипты jquery.easing.min.1.3.js и jquery-1.3.2.min.js являются дополнительными библиотеками и особо пристальном расмотрении не нуждаются, все эти библиотеки доступны для скачивания на официальном сайте jQuery.

Скачать файл
размер файла: 34,47 Kb
cкачиваний: 161

Раздел: Статьи для веб-мастера




Дополнительно Популярное
Дизайнерский веб-ресурс: Дле, Вордпресс, Джумла, фотошоп, плагины, иконки, шаблоны, текстуры, смайлики, логотипы.