<!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>
