个人博客—用户登陆&登出

点击头部的登陆按钮，弹出用户登录dialog

用户登录dialog

输入用户名和密码会验证是否符合要求，不符合则在上面提示错误信息，且将对应的表单元素边框和必填标志变成红色；每增加一条错误信息相应增加登录表单高度，避免出现滚动条。

错误信息

用户名和密码输入符合规则后，当密码输入框失去焦点时向后台验证用户名和密码是否正确；验证正确后方可登录。

用户名或密码不正确

用户名和密码正确可以登录

点击登录按钮，向后台发送登录请求；发送请求前弹出数据交互中dialog，发送成功后弹出登陆成功dialog；

数据交互中

登陆成功

登陆成功后，设置登陆cookie，如果选择了有效期则登陆cookie有效期设置为一周，否则设置为默认有效期，头部显示用户名和登出按钮；

登陆成功显示用户名和登出

点击登出按钮则退出登录，删除登陆cookie，显示注册和登陆按钮

html部分

帐号：

*

密码：

*

登录后有效期一周

js部分

// 头部登录按钮点击弹出登陆表单

$('#header .loginbtn').on("click",function () {

$('#login').dialog('open');

});

// 登录表单

$('#login').dialog({

autoOpen : false,

modal : true,

resizable : false,

width : 320,

height : 240,

buttons : {

'登录' : function () {

$(this).submit();

}

}

}).validate({ //登录表单验证

// 登录表单提交处理函数,类似注册表单

submitHandler : function (form) {

login_submit_fuc(form);

},

showErrors : function (errorMap, errorList) {

var errors = this.numberOfInvalids();

if (errors > 0) {

$('#login').dialog('option', 'height', errors * 20 + 240);

} else {

$('#login').dialog('option', 'height', 240);

}

this.defaultShowErrors();

},

highlight : function (element, errorClass) {

$(element).css('border', '1px solid red');

$(element).parent().find('span').html('*').removeClass('succ');

},

unhighlight : function (element, errorClass) {

$(element).css('border', '1px solid #ccc');

$(element).parent().find('span').html(' ').addClass('succ');

},

errorLabelContainer : 'ol.login_error',

wrapper : 'li',

rules : {

login_user : {

required : true,

minlength : 2,

},

login_pass : {

required : true,

minlength : 6,

remote : {

url : 'php/login.php',

type : 'POST',

data : {

login_user : function () {

return $('#login_user').val();

},

},

},

},

},

messages : {

login_user : {

required : '帐号不得为空！',

minlength : jQuery.format('帐号不得小于{0}位！'),

},

login_pass : {

required : '密码不得为空！',

minlength : jQuery.format('密码不得小于{0}位！'),

remote : '帐号或密码不正确！',

}

}

});

function login_submit_fuc(form){

$(form).ajaxSubmit({

url : 'php/login.php',

type : 'POST',

beforeSubmit : function (formData, jqForm, options) {

$('#loading').dialog('open');

$('#login').dialog('widget').find('button').eq(1).button('disable');

},

success : function (responseText, statusText) {

if (responseText) {

$('#login').dialog('widget').find('button').eq(1).button('enable');

$('#loading').css('background', 'url(img/success.gif) no-repeat 20px center').html('登录成功...');

if ($('#expires').is(':checked')) {

$.cookie('user', $('#login_user').val(), {

expires : 7,

});

} else {

$.cookie('user', $('#login_user').val());

}

setTimeout(function () {

$('#loading').dialog('close');

$('#login').dialog('close');

$('#login').resetForm();

$('#login span.star').html('*').removeClass('succ');

$('#loading').css('background', 'url(img/loading.gif) no-repeat 20px center').html('数据交互中...');

$('#header .member, #header .logout').show();

$('#header .regbtn, #header .loginbtn').hide();

$('#header .member').html($.cookie('user'));

}, 1000);

}

},

});

}

php部分

require 'config.php';

$_pass = sha1($_POST['login_pass']);

$query = mysql_query("SELECT user,pass FROM user WHERE user='{$_POST['login_user']}' AND pass='{$_pass}'") or die('SQL 错误！');

if (mysql_fetch_array($query, MYSQL_ASSOC)) {

echo 'true';

} else {

echo 'false';

}

mysql_close();

?>

代码在Github：个人博客