手机登录验证倒计时session cookie(防刷新),可以切换到手机登录

首先把两个form表单贴出来(其中一个是display为none)

<form action="<%=basePath%>login/init-login.do" id="login_form"
      method="post" name="login_form1">
    <input type="hidden" name="jfinal_token" value="${jfinal_token }"/>
    <div>
        <label id="login-info"></label>
    </div>
    <div class="form-group">
        <label for="oa_user_name" class="t">用户名：</label> <input
            id="oa_user_name" name="userId" type="text"
            class="form-control x319 in" autocomplete="off">
    </div>
    <div class="form-group">
        <label for="oa_user_password" class="t">密&nbsp;&nbsp;&nbsp;码：</label> <input
            id="oa_user_password" name="password" type="password"
            autocomplete="off" class="form-control x319 in">
    </div>
    <div class="form-group"
         style="margin-left: 146px;height:25px; line-height:25px; margin-bottom: 5px;vertical-align:middle;">
        <input type="checkbox" name="rmbPassword" id="rmbPassword"/>
        <label for="rmbPassword" class="t">记住密码</label>&nbsp&nbsp&nbsp&nbsp&nbsp
        <label MousePointer = 99 text="changeMobile" style="font-size: 16px;color:#4A8CDB;" id="changeMobile" οnclick="changeMobile();">手机登录</label>
    </div>


    <div class="form-group space">

        <input type="button" id="login_ok" value="&nbsp;登&nbsp;录&nbsp;"
               class="btn btn-primary btn-lg" style="margin-left:75px"/>&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="reset" class="btn btn-default btn-lg"
               value="&nbsp;重&nbsp;置&nbsp;"/>
    </div>
</form>

<form action="<%=basePath%>login/mobile-login.do" id="mobile_login_form"
      method="post" name="mobile_login_form1" style="display: none">
    <%--<input type="hidden" name="jfinal_token" value="${jfinal_token }"/>--%>
        <div>
            <label id="mobile-login-info"></label>
        </div>
        <div class="form-group">
            <label for="mobile" class="t">手机号：</label> <input
                id="mobile" name="mobile" type="text"
                class="form-control x319 in" autocomplete="off" placeholder="请输入注册手机号码">
        </div>
        <div class="col-control">
            <div class="form-group">
                <label for="verify-code" class="t">验证码：</label> <input
                    id="verify-code" name="verifyCode" type="text"
                    class="form-control x164 in" autocomplete="off" placeholder="请输入验证码">
                <button type="button" class="js-verify-code-send text-primary btn btn-default form-link"
                        id="get-verify-code" οnclick="getVlidCode()">获取验证码
                </button>
            </div>
        </div>

        <div class="form-group">
            <div class="text-primary">
                <label MousePointer = 99 text="changeUser" style="font-size: 16px;color:#4A8CDB;" id="changeUser" οnclick="changeUser();">账号登录</label>
            </div>
        </div>

        <div class="clearfix form-group m-t-md" style="margin-top: 1%!important;">
            <button type="button" id="mobile_login_ok" class="btn btn-primary btn-block">手机登录</button>
        </div>


</form>

 

获取验证码按钮有点击事件，判断并发送短信

function getVlidCode(){
    var mobile = $("#mobile").val();//将用户名作为session存储的key
    var mobile_login_info=$("#mobile-login-info");
    if(mobile==null){
        mobile="";
    }
    var flog=false;
    var mobile=$('#mobile').val();
    var pre=/^[1][358][0-9]{9}$/;
    if(mobile==''){
        mobile_login_info.text('手机号不允许为空');
    }else{
        var pre=/^[1][358][0-9]{9}$/;
        if(!pre.test(mobile)){
            mobile_login_info.text('手机号码格式有误');
        }else {
            flog=true;
        }
    }
    if (flagT&&flog){
        $.ajax({
            url: '<%=basePath%>login/getVerifYCode.do',
            data: {
                mobile: mobile
            },
            type: 'get',
            cache: false,
            dataType: 'json',
            success: function (json) {
                if(json.statusCode==200){
                    mobile_login_info.text('');
                    chengeviyfValue();
                }else if(json.statusCode==300){
                    mobile_login_info.text('您的账号未绑定手机号');
                }else if(json.statusCode==301){
                    mobile_login_info.text('您已在60秒内发过短信');
                }
            }
        });
    }
}

后台接收ajax

Map<String, Object> getVerifYCode(HttpServletRequest request,HttpServletResponse response) throws IOException {
        String statusCode = "200";
        Map<String, Object> resMap = new HashMap<String, Object>();
        String mobile = request.getParameter("mobile");
        final HttpSession session = request.getSession();
        //String bit4Rand = CommonUtils.get4HibitRandom();
        
        //判断cookie中是否有手机号，函数最后给该手机设置cookie时间    
        boolean cookieFlog=false;
        Cookie[] cookies = request.getCookies();
        for(Cookie cookie:cookies){
            if(cookie.getName().equals(mobile)){
                cookieFlog=true;
            }
        }

        GxSysUser user=sysUserManager.findUniqueBy("userMobileNum",mobile);
        if(user!=null&&!cookieFlog){
            String bit4Rand = randomCode();//先写死
            session.setAttribute(mobile, bit4Rand);
            logger.error("[存入的验证码和key] key："+mobile+" bit4Rand:"+bit4Rand);
            // TODO:调用下发验证码的邮件
          
        }else {
            statusCode="300";
            if(cookieFlog){
                statusCode="301";
            }
        }
            //手机号设置cookie 凡是点发送验证码，都会验证如果有cookie if判断那就false不发验证  
        if(!cookieFlog){
            request.setCharacterEncoding("UTF-8");//设置服务器的编码，默认是ISO-8859-1
            response.setContentType("text/html; charset = utf-8");//告诉浏览器服务器的编码格式
            Cookie cookie=new Cookie(mobile,mobile);
            cookie.setMaxAge(60);
            response.addCookie(cookie);
        }

        resMap.put("statusCode", statusCode);
        return resMap;
    }

如果要给发送验证码那里倒计时前端

var flagT=true;
var flag=true;
var totalNum=60;

function chengeviyfValue() {
    var mobile_login_info=$("#mobile-login-info");
    if (flag) {
        $("#get-verify-code").text("剩余(" + totalNum + ")秒");
        $("#get-verify-code").attr("disabled",true);
        var mobile = $("input[name='mobile']").val();
        if (totalNum == 0) {//时间到了 没有值，清空session中保存的验证码
            $("#get-verify-code").attr("disabled",false);
            document.getElementById('get-verify-code').innerHTML = "重新发送";
            $.ajax({
                type: "GET",
                async: false,
                data: {
                    mobile:mobile
                },
                url: '<%=basePath%>login/removeVerifYCode.do',
                success: function (date) {
                    mobile_login_info.text('提示！ 验证码已失效，请重新发送！');
                }
            });
            totalNum = 60;
            flagT = true;
            return;
        } else {
            flagT = false;//当totalNum的值不等于0时，不让在点击发送按钮
        }
        totalNum--;
        setTimeout('chengeviyfValue()', 1000);
    }
}