個(gè)人博客—用戶登陸&登出
-
點(diǎn)擊頭部的登陸按鈕岩梳，彈出用戶登錄dialog
用戶登錄dialog -
輸入用戶名和密碼會(huì)驗(yàn)證是否符合要求锉屈，不符合則在上面提示錯(cuò)誤信息代乃，且將對(duì)應(yīng)的表單元素邊框和必填標(biāo)志變成紅色匀泊；每增加一條錯(cuò)誤信息相應(yīng)增加登錄表單高度断部，避免出現(xiàn)滾動(dòng)條猎贴。
錯(cuò)誤信息 - 用戶名和密碼輸入符合規(guī)則后，當(dāng)密碼輸入框失去焦點(diǎn)時(shí)向后臺(tái)驗(yàn)證用戶名和密碼是否正確蝴光；驗(yàn)證正確后方可登錄她渴。
用戶名或密碼不正確
用戶名和密碼正確可以登錄
- 點(diǎn)擊登錄按鈕，向后臺(tái)發(fā)送登錄請(qǐng)求蔑祟；發(fā)送請(qǐng)求前彈出數(shù)據(jù)交互中dialog趁耗，發(fā)送成功后彈出登陸成功dialog；
數(shù)據(jù)交互中
登陸成功
- 登陸成功后疆虚，設(shè)置登陸cookie苛败，如果選擇了有效期則登陸cookie有效期設(shè)置為一周，否則設(shè)置為默認(rèn)有效期径簿，頭部顯示用戶名和登出按鈕罢屈；
登陸成功顯示用戶名和登出
- 點(diǎn)擊登出按鈕則退出登錄，刪除登陸cookie篇亭，顯示注冊(cè)和登陸按鈕
html部分
<!-- 用戶登陸彈窗 -->
<form id="login" title="用戶登錄">
<ol class="login_error"></ol>
<p>
<label for="user">帳號(hào)：</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部分
// 頭部登錄按鈕點(diǎn)擊彈出登陸表單
$('#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({ //登錄表單驗(yàn)證
// 登錄表單提交處理函數(shù),類似注冊(cè)表單
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 : '帳號(hào)不得為空缠捌！',
minlength : jQuery.format('帳號(hào)不得小于{0}位！'),
},
login_pass : {
required : '密碼不得為空译蒂！',
minlength : jQuery.format('密碼不得小于{0}位曼月！'),
remote : '帳號(hào)或密碼不正確！',
}
}
});
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('數(shù)據(jù)交互中...');
$('#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 錯(cuò)誤柔昼！');
if (mysql_fetch_array($query, MYSQL_ASSOC)) {
echo 'true';
} else {
echo 'false';
}
mysql_close();
?>
<b><big>代碼在Github：個(gè)人博客</big></b>
