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，就記到這，這個點過去了，這個項目還有好多沒的點，以後有的是時間寫。