<!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 green"); flag = true; } else { 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 green"); flag = true; } else { 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'); //显示背景 $('#msg-box').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>
ajax注册验证
最新推荐文章于 2020-09-16 13:25:50 发布