<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache"> <meta http-equiv="Expires" content="0"> <title>服务平台系统注册</title> <style> #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 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> <header class="header"> <img src="/images/login/top_bg.png" alt=""> <div class="headerBox"> <div class="headerInnerBox"> </div> </div> </header> <div id="register"> <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="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 id="savebtn">注册</button> </div> </div> </div> <div id="bg"></div> <div id="msg-box"></div> <script src="~/lib/jquery/dist/jquery.min.js"></script> <script> $(function ($) { $('#phone').on("blur", function () { checkPhone($('#phone')); }); $('#password').on("blur", function () { checkPwd($('#password')) }); $('#rpassword').on("blur", function () { checkRpwd($('#rpassword')); }); //选择注册按钮,绑定点击事件 $('#register').on("click", "#savebtn", function () { reg(); }); }); //设置一个标记 var flag = false; //检测手机号 function checkPhone(element) { 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; } } //检测密码 function checkPwd(element) { 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"); flag = true; } else { element.css("border", "2px solid red"); flag = false; } } //检测再次输入的密码 function checkRpwd(element) { //var element = $('#rpassword'); if (element.val() == $('#password').val() && element.val() != '' && element.val().length > 5 && element.val().length < 18) { element.css("border", "2px solid green"); flag = true; } else { element.css("border", "2px solid red"); flag = false; } } //注册 //给提交按钮绑定一个点击事件,在点击事件中提交输入的内容 var reg = function () { checkPhone($('#phone')); checkPwd($('#password')) checkRpwd($('#rpassword')); console.log(flag); if (flag) { loading(); $.post("/User/Regist", { "Phone": $('#phone').val(), "ConfirmPassword": $('#rpassword').val(), "Password": $('#password').val() }, function (data) { console.log(data); if (data.Code == 1) { msg_box(data.Message); } else { msg_box(data.Message, false); } }, 'json'); } } function loading() { $('#bg').css('display', 'block'); //显示背景 $('#msg-box').css('display', 'block'); //显示消息框 $('#msg-box').addClass("loading"); //显示加载中图片 } function msg_box(msg, flag = true) { $('#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 = '/User/Login'; //跳转页面 } }, 1000); } </script> </body> </html>