ajax验证用户登陆及记住密码

一个人独自负责一个项目，正好记下以前没实现过的技术点，今天就从登陆功能开始，前端是js验证，后端是php脚本验证并且添加了记住密码功能。

从上图可以看出，前端主要的技术点是验证用户名和密码是否输入并给予提示，为了提高用户体验，用户一进入该页面，便自动聚焦到用户名输入框，同时在密码输入框里绑定个onkeypress事件，也就是用户输入完密码后，按回车键就可以完成操作，当然了这里做的事ajax验证，同时对于任何验证出错的信息都出现在用户名输入框上（见下图），并且设置了时限为3秒，也就是3秒后消失。

下面为html代码

                <form>
                    <span class="error_msg"></span>
                    <p class="pst_relative">
                        <label class="input_msg"></label><input type="text" name="username" placeholder="用户名" class="login_input" maxlength="60">
                    </p>
                    <p class="pst_relative">
                        <label class="input_msg"></label><input type="password" name="passwd" placeholder="密码" onkeydown="keydown(event)" class="login_input" maxlength="60">
                    </p>
                    <p class="clearfix">
                        <span class="fl_left w_b60 psw_info">
                            <input type="checkbox" id="remmberpwd">
                            <label for="remmberpwd">记住密码</label>
                        </span>
                        <a class="fl_right psw_info" href="#">忘记密码？</a>
                    </p>
                    <p class="clearfix">
                        <input class="fl_left btn btn_login" type="button" value="登   录">
                        <a class="fl_right log_rega" href="#">免费注册</a></p>
                </form>

下面为js代码验证代码

$(function() {
    var height = $(document).height();
    var bgheight = $(".login_bg").height();
    $(".login_bg").css({"height": height + "px"});

    $(".error_msg").hide();

    // 默认账号输入框获得焦点
    $('input[name=username]').focus();

    // 点击登陆
    $('.btn_login').click(function() {
        var username = $.trim($('input[name=username]').val());
        var passwd = $.trim($('input[name=passwd]').val());
        var remember = $('#remmberpwd').is(':checked') ? 1 : 0;
        if (username == '') {
            $(".error_msg").html('请填写用户名');
            $(".error_msg").show().fadeOut(2000);
            $('input[name=username]').focus();
            return false;
        } else if (passwd == '') {
            $(".error_msg").html('请填写密码');
            $(".error_msg").show().fadeOut(2000);
            $('input[name=passwd]').focus();
            return false;
        }

        // 异步提交
        $.post('url', 'username=' + username + '&password=' + passwd + '&remember=' + remember, function(json) {

            // 验证失败
            if (json.status == 0) {
                $(".error_msg").html(json.message);
                $(".error_msg").show().fadeOut(2000);

            // 成功
            } else {
                console.log('success');
                //location.href = '';
            }
        }, 'json')
    })
});

// 判断回车
function keydown(e){
    var e = e || event;
    if (e.keyCode==13) {
        $(".btn_login").click();
    }
}

认真看了下js验证代码后，应该知道有个remember变量，这个就是记住密码的，传到后台，php脚本通过接收该值，如果为1则说明需要记住密码，这里的技术点主要是php的一个方法setcookie ( string $name [, string $value [, int $expire = 0 [, string $path [, string $domain [, bool $secure = false [, bool $httponly = false ]]]]]] )，记住密码就利用了其中的第三个参数expire，那么在接收值为1时，便设置expire相关的过期时间，一般为1天也就是 setcookie('id',1,strtotime('+1 days')),同时要注意，由于cookie是存放在客户端的，因此那个id的值应该要加密，也就是存储的加密，提取的依据存储时加密规则反着来提取既可。记住密码后，那么下次再登陆时，便可以在相关的方法里这么写着

    // 首页登录
    public function index() {

        if (isLogin()) {
            echo 'you have already login in';
        } else {
            $this->display();
        }
    }

看到上面的代码应该知道isLogin就是验证用户之前是否已经记住密码了吧。

ok，就记到这，这个点过去了，这个项目还有好多没的点，以后有的是时间写。