邢栋博客

html 代码

<form action="login.php" method="post" id="mylogin">
                    <div class="login_info"><div id="login_error"></div></div>
                    <div class="login_c1">
                            <input type="text" name="username" class="input1" placeholder="请输入用户名"
                            onblur="checkNamefor();" />
                    </div>
                    <div class="login_c1">
                            <input type="password" name="password" class="input1" placeholder="请输入密码"
                            onblur="checkPassfor();" />
                    </div>
                    <div class="login_c2">
                            <input type="text" name="code" class="input2" placeholder="验证码"
                            onblur="checkVerifyfor()" />
                            <a href="javascript:void(change_code(this));"><img src="{:U(MODULE_NAME.'/Login/verify','','')}" id="code"/></a>
                            <a href="javascript:void(change_code(this));" style="color:#666666;">看不清?</a>&nbsp;
                    </div>
                    <div class="login_c3">
                            <span  class="input3" id="loginBt" onclick="loginSubmit();"  />登录</span>
                    </div>
     </form>

js代码

//显示错误信息

    function tipShow(){
        $("#login_error").show();
    }
//隐藏错误信息
    function tipHide(){
        $("#login_error").hide();
    }

//验证用户名初步
function checkNamefor() {
        var tip = $("#login_error");
        var nkName = $("input[name='username']").val();
        if (nkName == "" || nkName == null) {
            tip.html("请输入用户名");
            tipShow();
            return false;
        }else{
            tipHide();
            return true;
        }
}

//验证密码 初步
function checkPassfor() {
        var tip = $("#login_error");
        var pwd = $("input[name='password']").val();
        if (pwd == null || pwd == "") {
            tip.html("请输入密码");
            tipShow();
            return false;
        }else {
            tipHide();
        }
        return true;
}

//验证验证码初步
 function checkVerifyfor() {
        var tip = $("#login_error");
        var vCode = $("input[name='code']").val();
        if (vCode == null || vCode == "") {
            tip.html("请输入验证码");
            tipShow();
            return false;
        }else if (vCode.length!=4) {
            tip.html("验证码的长度是4位哦");
            tipShow();
            return false;
        }else {
            tipHide();
        }
        return true;
}

//点击登录按钮验证
  function loginSubmit(){
        var tip = $("#login_error");
        if(!checkNamefor()){
            return;
        }
        if(!checkPassfor()){
            return;
        }
        if(!checkVerifyfor()){
            return;
        }
        var url = "checkLogin.php";
        var userName = $("input[name='username']").val();
        var password = $("input[name='password']").val();
        var verifycode = $("input[name='code']").val();

        $.post(url,{"username":userName,"userpass":password,"code":verifycode},function(data){

                if(data.stat==1){
                    document.mylogin.submit();   //异步验证成功后 提交表单            

                }else if(data.stat==4){
                       tip.html("验证码不正确");
                    tipShow();            
                }else if(data.stat==2){
                    tip.html("用户名或密码错误");
                    tipShow();          
                }else if(data.stat==3){
                    tip.html("该用户被停用");
                    tipShow();          
                }else{
                    tip.html("请求错误");
                    tipShow();
                }
                }
            );
    }

php代码。checkLogin.php
根据post请求得到的参数 进行查数据库判断，返回

例如：

验证码错误 ：

echo $data['stat'] == 4;