个人博客—用户登陆&登出
-
点击头部的登陆按钮，弹出用户登录dialog
用户登录dialog -
输入用户名和密码会验证是否符合要求，不符合则在上面提示错误信息，且将对应的表单元素边框和必填标志变成红色；每增加一条错误信息相应增加登录表单高度，避免出现滚动条。
错误信息 - 用户名和密码输入符合规则后，当密码输入框失去焦点时向后台验证用户名和密码是否正确；验证正确后方可登录。
用户名或密码不正确
用户名和密码正确可以登录
- 点击登录按钮，向后台发送登录请求；发送请求前弹出数据交互中dialog，发送成功后弹出登陆成功dialog；
数据交互中
登陆成功
- 登陆成功后，设置登陆cookie，如果选择了有效期则登陆cookie有效期设置为一周，否则设置为默认有效期，头部显示用户名和登出按钮；
登陆成功显示用户名和登出
- 点击登出按钮则退出登录，删除登陆cookie，显示注册和登陆按钮
html部分
<!-- 用户登陆弹窗 -->
<form id="login" title="用户登录">
<ol class="login_error"></ol>
<p>
<label for="user">帐号：</label>
<input type="text" name="login_user" class="text" id="login_user" />
<span class="star">*</span>
</p>
<p>
<label for="pass">密码：</label>
<input type="password" name="login_pass" class="text" id="login_pass" />
<span class="star">*</span>
</p>
<p>
<input type="checkbox" name="expires" id="expires" checked="checked" /><label for="expires">登录后有效期一周</label>
</p>
</form>
<!-- /用户登陆弹窗 -->
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部分
<?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();
?>
<b><big>代码在Github：个人博客</big></b>
