<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
header {
height: 60px;
line-height: 60px;
background-color: gray;
}
.wrap {
width: 1200px;
margin: 0 auto;
}
.regBtn {
text-decoration: none;
color: white;
float: right;
}
.cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
/*opacity: 0.5;*/
/*display: none;*/
}
.regBox {
width: 500px;
height: 300px;
padding: 20px;
background-color: white;
margin: 200px auto;
position: relative;
}
.cross {
/*float: right;*/
position: absolute;
top: 0;
right: 0;
}
.input-box {
border: 1px solid #ddd;
width: 398px;
height: 52px;
line-height: 52px;
}
.input-box > label {
display: inline-block;
width: 104px;
padding-left: 20px;
}
.input-box > input {
width: 250px;
height: 30px;
/*vertical-align: 2px;*/
border: none;
outline: none;
font-size: 16px;
}
.tips{
height: 32px;
line-height: 32px;
font-size: 14px;
color: #ccc;
}
</style>
</head>
<body>
<div class="cover" id="cover">
<div class="regBox">
<span class="cross" id="cross">X</span>
<h1>用户注册</h1>
<form action="">
<div class="input-box" id="inputBox">
<label for="username">用户名</label>
<input type="text" id="username">
</div>
<p class="tips" id="tip1"></p>
<div class="input-box">
<label for="password">密码</label>
<input type="text" id="password">
</div>
</form>
</div>
</div>
<header>
<div class="wrap">
<a href="#" class="regBtn" id="regBtn">注册</a>
</div>
</header>
<div class="content">
<h1>自己打开福是的发送到福萨芬</h1>
</div>
<footer></footer>
<script>
regBtn.addEventListener("click", () => {
cover.style.display = "block";
}, false);
cross.addEventListener("click", () => {
cover.style.display = "none";
}, false);
username.addEventListener("click", () => {
tip1.textContent = "是地方就好上了对方䣌按时放"
}, false)
username.addEventListener("blur", () => {
let re = /^1([3|5|7|8]){1}\d{9}$/;
let text = username.value;
if(re.test(text)){
tip1.textContent = "用户名合法"
}else{
tip1.textContent = "用户名不合法";
tip1.style.color = "red";
inputBox.style.borderColor = "red";
}
}, false)
</script>
</body>
</html>
