<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery.min.js"></script>
</head>
<body>
<div class="main_box">
<div class="box">
<form>
用户名:<input class="id" type="text"><br> 邮 箱:
<input class="email" type="text"><br> 地 址:
<input class="adress" type="text"><br> 密 码:
<input class="pwd" type="password"><br>
<button type="button" class="button">注   册</button>
</form>
</div>
</div>
<style type="text/css">
span {
color: white;
}
.main_box {
width: 100%;
height: 910px;
background-color: #000000;
}
.title {
font-size: 5em;
color: white;
width: 100%;
height: 100px;
text-align: center;
}
.box {
width: 1050px;
height: 310px;
margin: 150px auto 50px auto;
padding-left: 360px;
}
input {
height: 40px;
width: 200px;
border-radius: 20px;
border: solid 1px #B5B5B5;
margin: 10px;
font-size: 1.2em;
}
form {
color: white;
font-size: 1.2em;
float: left;
margin-left: 50px;
}
.button {
width: 280px;
height: 40px;
background-color: #9781FD;
border-radius: 25px;
color: white;
font-size: 1.3em;
font-weight: 700;
margin-top: 10px;
}
.img {
width: 310px;
height: 310px;
float: left;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
var tip1 = "<span class='span1'>用户名不能为空!</span>"; //声明发生错误时在输入框后面添加的span
var tip2 = "<span class='span2'>邮箱格式错误或不能为空!</span>";
var tip3 = "<span class='span3'>地址不能为空!</span>";
var tip4 = "<span class='span4'>密码长度不能小于五位且最多为十位 !</span>";
var condition = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/; //声明判定邮箱格式的条件
$(".id").blur(function() {
if(!$(".id").val()) { //判定用户名非空
$(".span1").remove();
$(".id").after(tip1);
} else {
$(".span1").remove();
}
});
$(".email").blur(function() {
if(!condition.test($(".email").val())) { //判定邮箱格式
$(".span2").remove();
$(".email").after(tip2);
} else {
$(".span2").remove();
}
});
$(".adress").blur(function() {
if(!$(".adress").val()) { //判定地址非空
$(".span3").remove();
$(".adress").after(tip3);
} else {
$(".span3").remove();
}
});
$(".pwd").blur(function() {
if($(".pwd").val().length < 5 || $(".pwd").val().length > 10) { //判定密码长度不能小于5位且不能大于10位
$(".span4").remove();
$(".pwd").after(tip4);
} else {
$(".span4").remove();
}
});
$(".button").click(function() { //符合所有条件则弹出弹窗表单验证通过，如果不符合则弹出弹窗提醒用户更改
if(!$(".id").val() || !condition.test($(".email").val()) || !$(".adress").val() || $(".pwd").val().length < 5 || $(".pwd").val().length > 10) {
alert("注册信息有误，请更改个人信息");
} else {
alert("注册成功");
}
})
})
</script>
</body>
</html>
