先看一下最终效果，登陆和注册
背景图片：
附源码：
login.html
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>login</title>
<style>
* {
margin: 0;
padding: 0;
} html {
height: 100%;
width: 100%;
overflow: hidden;
margin: 0;
padding: 0;
background: url(Desert.jpg) no-repeat 0px 0px;
background-repeat: no-repeat;
background-size: 100% 100%;
-moz-background-size: 100% 100%;
} body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
} #loginDiv {
width: 37%;
display: flex;
justify-content: center;
align-items: center;
height: 300px;
background-color: rgba(75, 81, 95, 0.3);
box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
border-radius: 5px;
} #name_trip {
margin-left: 50px;
color: red;
} p {
margin-top: 30px;
margin-left: 20px;
color: azure;
} input {
margin-left: 15px;
border-radius: 5px;
border-style: hidden;
height: 30px;
width: 140px;
background-color: rgba(216, 191, 216, 0.5);
outline: none;
color: #f0edf3;
padding-left: 10px;
} .button {
border-color: cornsilk;
background-color: rgba(100, 149, 237, .7);
color: aliceblue;
border-style: hidden;
border-radius: 5px;
width: 100px;
height: 31px;
font-size: 16px;
}
</style>
</head> <body>
<div id="loginDiv">
<form action="" id="form">
<h1 style="text-align: center;color: aliceblue;">LOGIN IN</h1>
<p>User Name:<input id="userNname" type="text"><label id="name_trip"></label></p> <p>Password: <input id="password" type="password"><label id="password_trip"></label></p> <div style="text-align: center;margin-top: 30px;">
<input type="submit" class="button" value="login up">
<input type="reset" class="button" value="reset">
</div>
</form>
</div> </body>
</html>
register.html
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>register</title>
<style>
* {
margin: 0;
padding: 0;
} html {
height: 100%;
width: 100%;
overflow: hidden;
margin: 0;
padding: 0;
background: url(Desert.jpg) no-repeat 0px 0px;
background-repeat: no-repeat;
background-size: 100% 100%;
-moz-background-size: 100% 100%;
} body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
} #loginDiv {
width: 37%;
display: flex;
justify-content: center;
align-items: center;
height: 650px;
background-color: rgba(75, 81, 95, 0.3);
box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
border-radius: 5px;
} #name_trip {
margin-left: 50px;
color: red;
} p,
.sexDiv {
margin-top: 10px;
margin-left: 20px;
color: azure;
} .sexDiv>input,
.hobby>input {
width: 30px;
height: 17px;
} input,
select {
margin-left: 15px;
border-radius: 5px;
border-style: hidden;
height: 30px;
width: 140px;
background-color: rgba(216, 191, 216, 0.5);
outline: none;
color: #f0edf3;
padding-left: 10px;
} .button {
border-color: cornsilk;
background-color: rgba(100, 149, 237, .7);
color: aliceblue;
border-style: hidden;
border-radius: 5px;
width: 100px;
height: 31px;
font-size: 16px;
} .introduce {
margin-left: 110px;
} .introduce>textarea {
background-color: rgba(216, 191, 216, 0.5);
border-style: hidden;
outline: none;
border-radius: 5px;
} h1 {
text-align: center;
margin-bottom: 20px;
margin-top: 20px;
color: #f0edf3;
} b {
margin-left: 50px;
color: #FFEB3B;
font-size: 10px;
font-weight: initial;
}
</style>
</head> <body>
<div id="loginDiv">
<form action="">
<h1>REGESTER</h1>
<p>用户姓名:<input id="userNname" type="text" autofocus required><label id="name_trip"></label></p> <p>用户密码:<input id="password" type="password" required><label id="password_trip"></label></p> <p>确认密码:<input id="surePassword" type="password" required><label id="surePassword_trip"></label></p> <p>
用户类型:
<select name="type" id="userType">
<option value="0">请选择</option>
<option value="1">普通类型</option>
<option value="2">VIP类型</option>
</select>
<label id="type_trip"></label>
</p> <div class="sexDiv">
用户性别:
<input class="userSex" name="sex" value="boy" type="radio">男
<input class="userSex" name="sex" value="girl" type="radio">女
<label id="sex_trip"></label>
</div> <p>
出生日期:
<input id="birthday" type="date">
<label id="birthday_trip"></label>
</p> <p class="hobby">
兴趣爱好:
<input type="checkbox" name="hobby" value="read">阅读
<input type="checkbox" name="hobby" value="music">音乐
<input type="checkbox" name="hobby" value="sport">运动
<label id="hobby_trip"></label>
</p> <p>
电子邮件:
<input id="email" type="email" required>
<label id="emil_trip"></label>
</p> <p> 自我介绍:</p>
<div class="introduce">
<textarea name="introduce" cols="30" id="introduceText" required rows="10"></textarea>
<label id="introduce_trip"></label>
</div> <p style="text-align: center;">
<input type="submit" class="button" onblur="checkForm()" onclick="return submitT()" value="提交">
<input type="reset" class="button" value="重置">
</p>
</form>
</div> </body>
<script type="text/javascript">
function trip(obj, trip) {
document.getElementById(obj).innerHTML = "<b>" + trip + "</b>";
} function checkSex() {
var sexNum = document.getElementsByName("sex");
var sex = "";
for (let i = 0; i < sexNum.length; ++i) {
if (sexNum[i].checked) {
sex = sexNum[i];
} }
if (sex == "") {
trip("sex_trip", "ERROR!!");
return false;
} else {
trip("sex_trip", "OK!!");
}
} function checkHobby() {
var hobbyNum = document.getElementsByName("hobby");
var hobby = "";
for (let i = 0; i < hobbyNum.length; ++i) {
if (hobbyNum[i].checked) {
hobby = hobbyNum[i];
}
}
if (hobby == "") {
trip("hobby_trip", "ERROR!!");
return false;
} else {
trip("hobby_trip", "OK!!"); }
} function checkSelect() {
var myselect = document.getElementById("userType");
var index = myselect.selectedIndex;
var checkValue = myselect.options[index].value;
if (checkValue == 0) {
trip("type_trip", "请选择!!");
return false;
} else {
trip("type_trip", "OK!!");
}
} function checkForm() {
checkSelect();
checkHobby();
checkSex(); var trip = document.getElementsByName("em");
var tripV = trip.innerHTML();
//获取用户名输入项
var userNname = document.getElementById("userNname");
var uName = userNname.value;
if (uName.length < 1 || uName.length > 10) {
trip("name_trip", "账号长度为1-10位!!");
return false;
} else {
trip("name_trip", "OK!!"); } //密码长度大于6 和确认必须一致
var password = document.getElementById("password");
var userPass = password.value;
if (userPass.length < 6) {
trip("password_trip", "密码要>6位!!");
return false;
} else {
trip("password_trip", "OK!!");
} //获取确认密码框的值 var
var surePassword = document.getElementById("surePassword");
var surePass = surePassword.value;
if (userPass != surePass) {
trip("surePassword_trip", "两次密码不一致!!");
return false;
} //校验邮箱:/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
var inputEmail = document.getElementById("email");
var uEmail = inputEmail.value;
if (!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/.test(uEmail)) {
trip("emil_trip", "邮箱不合法!!");
return false;
} else {
trip("emil_trip", "OK!!");
} // 校验自我介绍
var introduceText = document.getElementById("introduceText");
var introduce = introduceText.value;
if (introduce.length < 3 || uName.length > 60) {
trip("introduce_trip", "长度为3-50字!!");
return false;
} else {
trip("introduce_trip", "OK!!");
} return true;
} function submitT() {
if (checkForm()) {
return true;
} else {
return false;
}
}
</script>
</html>