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

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

• 点击头部的登陆按钮，弹出用户登录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>