ajax注册验证

发布时间：2020-12-16 03:24:30 所属栏目：百科来源：网络整理
导读：!doctype html html head meta charset= "utf-8" title 简单的注册页面带验证 / title script src= "js/jquery-1.11.3.js" / script style * { padding : 0 ; margin : 0 ;} #register { width : 540 px ; height : 407 px ; border : 1 px solid hotpink ;
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简单的注册页面带验证</title>
<script src="js/jquery-1.11.3.js"></script>
<style>
* {
   padding:0;
   margin:0;
}
#register {
   width:540px;
   height:407px;
   border:1px solid hotpink;
   margin:0 auto;
   margin-top:20px;
}
#register .row {
   height:50px;
   line-height:50px;
   border-bottom:1px dashed #ccc;
}
#register .row div {
   float:left;
   height:50px;
   line-height:50px;
}
#register .row .left {
   width:30%;
   text-align:right;
}
#register .row .right {
   width:70%;
}
#register .row .right input {
   width:200px;
   height:25px;
   border:1px solid #ccc;
   border-radius:4px;
   padding:0px 4px;
   margin-left:10px;
}
#register .row .right input[type=radio] {
   width:30px;
   height:15px;
   line-height:15px;
}
#register .row button {
   width:80px;
   height:30px;
   line-height:30px;
   margin:0 auto;
}
#bg {
   width:100%;
   height:800px;
   background:black;
   opacity:0.8;
   position:absolute;
   top:0px;
   z-index:10;
   display:none;
}
#msg-box {
   height:100px;
   line-height:100px;
   text-align:center;
   top:240px;
   position:absolute;
   z-index:100;
   display:none;
}
.loading {
   width:100px;
   margin-left:48%;
   /*background-image:url('loading.gif');*/  background-repeat:no-repeat;
}
.success {
   width:400px;
   margin-left:34%;
   color:green;
   border:2px solid green;
}
.error {
   width:400px;
   margin-left:34%;
   color:red;
   border:2px solid red;
}
</style>
</head>
<body>
<div id="register">
    <div class="row">
        <div class="left">
            用户名:
        </div>
        <div class="right">
            <input type="text" name="username" id="username" placeholder="请输入用户名">
        </div>
    </div>
    <div class="row">
        <div class="left">
            手机:
        </div>
        <div class="right">
            <input type="text" name="phone" id="phone" placeholder="请输入手机号">
        </div>
    </div>
    <div class="row">
        <div class="left">
            邮箱:
        </div>
        <div class="right">
            <input type="text" name="email" id="email" placeholder="请输入邮箱">
        </div>
    </div>
    <div class="row">
        <div class="left">
            性别:
        </div>
        <div class="right">
            <input type="radio" name="sex" value="1">男
            <input type="radio" name="sex" value="0">女
            <input type="radio" name="sex" value="2" checked>保密
        </div>
    </div>
    <div class="row">
        <div class="left">
            密码:
        </div>
        <div class="right">
            <input type="password" name="password" id="password" placeholder="请输入密码">
        </div>
    </div>
    <div class="row">
        <div class="left">
            确认密码:
        </div>
        <div class="right">
            <input type="password" name="rpassword" id="rpassword" placeholder="请再次输入密码">
        </div>
    </div>
    <div class="row">
        <div class="left">
        </div>
        <div class="right">
            <button>注册</button>
        </div>
    </div>
</div>
<div id="bg"></div>
<div id="msg-box"></div><script>
$(function($) {
    checkUsername();
    checkPhone();
    checkEmail();
    checkPwd();
    checkRpwd();

    //选择注册按钮,绑定点击事件  $('button').on("click",function() {
        reg();
    });
});
//设置一个标记 var flag = false;
//检测用户名 var checkUsername = function() {
    $('#username').on("blur",function() {
        var pattern = /^w{6,18}$/;
        var element = $('#username');
        if (pattern.test(element.val())) {
            element.css("border","2px solid green");
            flag = true;
        } else {
            element.css("border","2px solid red");
            flag = false;
        }
    });
}

//检测手机号 var checkPhone = function() {
    $('#phone').on("blur",function() {
        var pattern = /^1(3|4|5|7|8|)d{9}$/;
        var element = $('#phone');
        if (pattern.test(element.val())) {
            element.css("border","2px solid red");
            flag = false;
        }
    });
}

//检测邮箱 var checkEmail = function() {
    $('#email').on("blur",function() {
        var pattern = /^w+@(w+.)+(([a-z]+)|([a-z]+.[a-z]+))$/;
        var element = $('#email');
        if (pattern.test(element.val())) {
            element.css("border","2px solid red");
            flag = false;
        }
    });
}

//检测密码 var checkPwd = function() {
    $('#password').on("blur",function() {
        var pattern1 = /^[1-9]{6,18}$/;
        var pattern2 = /^[a-z]{6,18}$/;
        var pattern3 = /^[A-Z]{6,18}$/;
        var pattern4 = /^[0-9a-zA-Z~!@#$%^&*_-{6,18}]$/;
        var element = $('#password');
        if (pattern1.test(element.val()) || pattern2.test(element.val()) || pattern3.test(element.val()) || pattern4.test(element.val())) {
            element.css("border","2px solid green");
            a = 11;
            flag = a;
        } else {
            element.css("border","2px solid red");
            flag = false;
        }
    });
}

//检测再次输入的密码 var checkRpwd = function() {
    $('#rpassword').on("blur",function() {
        var element = $('#rpassword');
        if (element.val() == $('#password').val() && element.val() != '' && element.val().length > 5 && element.val().length < 18) {
            element.css("border","2px solid green");
        } else {
            element.css("border","2px solid red");
        }
    });
}

//获取性别 var getRadios = function() {
    var sex = $('input[type = "radio"]');
    for (var i in sex) {
        if (sex[i].checked) {
            return sex[i].value;
        }
    }
}

//注册 //给提交按钮绑定一个点击事件,在点击事件中提交输入的内容 var reg = function() {
    if (flag) {
        loading();
        $.post("url提交地址",{
                "username": $('#username').val(),"phone": $('#phone').val(),"email": $('#email').val(),"sex": getRadios('sex'),"password": $('#password').val()
            },function(data) {
                if (data.status) {
                    msg_box(data.msg);
                } else {
                    msg_box(data.msg,false);
                }
            },'json');
    }
}

function loading() {
    $('#bg').css('display','block'); //显示背景  $('#msg-box').css('display','block'); //显示消息框 // $('#msg-box').addClass("loading"); //显示加载中图片 }

function msg_box(msg,flag) {
    $('#bg').css('display','block').removeClass('loading'); //显示消息框,并移除加载中图片  flag = flag ? 'success' : 'error';
    $('#msg-box').addClass(flag);
    $('#msg-box').html(msg);
    var sec = 3;
    $('#msg-box').html(msg + sec + '秒后跳转...');
    setInterval(function() {
        sec--;
        $('#msg-box').html(msg + sec + '秒后跳转...');
        if (sec == 0) {
// location.href = 'http://www.baidu.com'; //跳转页面  }   

    },1000);
}</script>
</body>
</html>
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!