form表单注册校验所有填写项是否符合要求 ,以及在form的return submit()方法的Ajax返回值的调用

这是前端代码




注册






<form id="form" name="regForm" class="main_content signin_form" action="${pageContext.request.contextPath}/login/registerPass.action" method="post" onsubmit="return myChack()">
    <div class="form_title">5秒注册,开启蜕变之旅</div>
    <div class="wrap">
        <div class="inner_wrap">
            <div class="tab_wrap cf"></div>
            <div class="input input_item">
                <input type="text" id="nickname" name="nickname" placeholder="昵称" value autocomplete="off">
                <span class="errors_info" style="color:red"></span><span id="regmsg"></span>
                <img class="legal_input"  style="display:none;" src="/img/icon-right-28.png">
            </div>
            <div class="input input_item">
                <input type="text" id="phone" name="userPhone" placeholder="手机号码" value autocomplate="off">
                <span class="error_info" style="color:red"></span><span id="regphone"></span>
                <img  class="legal_input" style="display:none;"  src="/img/icon-right-28.png">
            </div>
            <div class="input input_item">
                <input type="password" id="pass" name="userPass" placeholder="密码" value autocomplate="off">
                <span class="error_pass"></span>
                <img  class="legal_password" style="display:none;" src="/img/icon-right-28.png">
            </div>
            <div class="input input_item">
                <input type="password" id="password" name="Pass" placeholder="重新输入一次密码" value autocomplate="off">
                <span class="error_password"></span>
                <img  class="legal_password" style="display:none;" src="/img/icon-right-28.png">
            </div>
            <div class="phone_code_wrap input_item cf">
                <div class="phone_code input fl">
                    <input type="text" id="text_code" name="phoneCode" placeholder="短信验证码" value autocomplete="off">
                </div>
                <a id="ceshi" href="javascript:;" class="get_code border-radius-6 fr">获取验证码</a>
            </div>
            <%-- <div class="voice_code_wrap">不想输入密码?<a class="voice_code" href="${pageContext.request.contextPath}/login/register.html">&nbsp;&nbsp;点我通过手机验证码注册</a>
            </div> --%>
            <input id="submit" class="submit border-radius-6" type="submit" value="注册">
            <div class="warn">
                "注册即代表我同意"
                <a  class="import" href="${pageContext.request.contextPath}/login/agreement.html">《华仁在线用户协议》</a>
            </div>
        </div>
    </div>
</form>

这是对应的js
function myChack() {
var myreg=/^[1][3,4,5,7,8][0-9]{9}? / ; v a r z z = / ( [ \d ] | [ \w ] ) 6 , 16 /;
document.getElementById(‘phone’).innerHTML=”;
document.getElementById(‘pass’).innerHTML=”;
document.getElementById(‘password’).innerHTML=”;

 var nickname=document.getElementById('nickname').value;
 var userPhone=document.getElementById('phone').value;
 var pass=document.getElementById('pass').value;
 var password=document.getElementById('password').value;
 var text_code=document.getElementById('text_code').value;
 var flag=false;//定义一个Boolean类型,接受Ajax的success方法的返回值,因为他们不是同一个函数
    $.ajax({
            url : "/check/code.action",
            type : "post",
            data : {"phoneCode":text_code,"userPhone":userPhone},
            async:false,
            success : function(data) {
                        alert(data);
                        if(data=="success"){
                                alert("验证成功");
                                flag=true;
                        }else{
                                alert("验证码输入不对");
                                flag=false;
                        }
            }
     });
  return flag;
  //判断各个选项的填写是否有误
 if(nickname==""){
     document.getElementById('nickname').innerHTML='手机号码格式错误';
        return false;
 }else if(userPhone==""||!myreg.test(userPhone)){
        document.getElementById('phone').innerHTML='手机号码格式错误';
        return false;
 }else if(pass==""||!zz.test(pass)){
        document.getElementById('pass').innerHTML='密码输入错误';
        return false;
 }else if(pass!=password) {
        document.getElementById('password').innerHTML='密码和重复密码不一致';
        return false; 
 }else if(flag) {
        return true; 
 }else{
        return false;
 }

};

猜你喜欢

转载自blog.csdn.net/qq_42689281/article/details/82428711