ajax 注册登录功能（格式判断、数据库信息判断）

 

注册判断效果

HTML 注册表单关键代码

 <div class="title-line">
            <span class="tit">注册</span>
        </div>
        <!-- register-container -->
       <form action="doRegister" method="post" onsubmit="return checkAll()">
        <div class="register-container">
            <div class="new_phone center_div">
                <input type="text" id="userName" name="uname" placeholder="用户名（例：像素头魔法师）" class="user_id_password mar_b_40px" onblur="checkName()">
                <p id="unameTip" class="yzm_x mar_t_69"></p>
                <span id="namemsg"></span>
            </div>
        </div>
        <div class="register-hidden-gruop">
            <div class="safe_window" style="display: block;">
            </div>
        </div>
        <div class="center_div">
            <input id="pwd" type="password" name="userpwd" placeholder="密码（6-16个字符组成，区分大小写）" class="user_id_password" onblur="checkPwd()">
            <p class="yzm_x mar_t_56"></p>
            <span id="pwdmsg"></span>
        </div>
        <div class="new_phone center_div">
            <input id="new_phone" type="text" name="tel" placeholder="填写常用手机号" onblur="checkPhone()">
            <p class="yzm_x mar_r_160"></p>
            <span id="phonemsg"></span>
        </div>
           <br/>
           <br/>
        <div class="register-hidden-gruop">
            <div class="center_div pc-register-descript ">
                <label>
                    <input name="agree" id="agree" type="checkbox" class="m-r-10" onblur="checkAgree()"> 我已同意
                    <a target="_blank" href="#">《月蚀网用户使用协议》</a>和
                    <a target="_blank" href="#">《月蚀网账号中心规范》</a>
                </label>
                <br/>
                <span id="agreemsg"></span>
            </div>
        </div>
        <input type="submit" value="注册" class="next_step center_div mar_t_120 ys-a">
       </form>
        <div id="register_pc_direct_login" class="register-hidden-gruop text-right">
            <a href="#">已有账号，直接登录&gt;</a>
        </div>

检查手机号码js

var isPhone=false;
function checkPhone(){
    //根据id得到 input标签
    var pinput = document.getElementById("new_phone");
    var pspan=document.getElementById("phonemsg");
    // pinput的value值
    var strPhone= pinput.value;
    if(strPhone==null || strPhone.trim().length==0){
        pspan.style.color="red";
        pspan.innerHTML="手机号不能为空";
        isPhone=false;
    }else{
        //对内容进行判断：是否符合手机号码的格式   11 正则表达式 ：手机号
        var reg=new RegExp("^1[0-9]{10}$");
        if(!reg.test(strPhone)){
            pspan.style.color="red";
            pspan.innerHTML="手机号不符合格式";
            isPhone=false;
        }else{
            //进一步判断数据库中有没有这个电话号码，有，不能注册：
            // 没有则返回true
            $.ajax({
                async:true,
                type:"POST",
                data:{"phone":strPhone},
                url:"/checkPhone",
                dataType:"text",
                success: function(data){
                    console.log(data);
                    if(data=="true"){
                        //绿色通过
                        pspan.style.color="green";
                        pspan.innerHTML="√";
                        isPhone=true;
                    }else{
                        pspan.style.color="red";
                        pspan.innerHTML="该手机号已经注册";
                        isPhone=false;
                    }
                }
            });
        }
    }
}

 

ajax访问的Url 代码

//检查手机号码是否存在
    @RequestMapping("/checkPhone")
    public void checkPhone(HttpServletRequest request, HttpServletResponse response){
        String phone = request.getParameter("phone");
        boolean flag = userDaoService.registerJudgePhone(phone);
        String judege = "false";
        if(flag){judege = "true";}
        try{
            PrintWriter out = response.getWriter();
            out.write(judege);
        } catch (Exception e){

        }
    }

本文例子是一个使用SSM框架的网站，checkPhone后端代码不一定适合你用。