先看一下最终效果，登陆和注册
背景图片：
附源码：
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
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <title>register</title>
7 <style>
8 * {
9 margin: 0;
10 padding: 0;
11 }
12
13 html {
14 height: 100%;
15 width: 100%;
16 overflow: hidden;
17 margin: 0;
18 padding: 0;
19 background: url(Desert.jpg) no-repeat 0px 0px;
20 background-repeat: no-repeat;
21 background-size: 100% 100%;
22 -moz-background-size: 100% 100%;
23 }
24
25 body {
26 display: flex;
27 align-items: center;
28 justify-content: center;
29 height: 100%;
30 }
31
32 #loginDiv {
33 width: 37%;
34 display: flex;
35 justify-content: center;
36 align-items: center;
37 height: 650px;
38 background-color: rgba(75, 81, 95, 0.3);
39 box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
40 border-radius: 5px;
41 }
42
43 #name_trip {
44 margin-left: 50px;
45 color: red;
46 }
47
48 p,
49 .sexDiv {
50 margin-top: 10px;
51 margin-left: 20px;
52 color: azure;
53 }
54
55 .sexDiv>input,
56 .hobby>input {
57 width: 30px;
58 height: 17px;
59 }
60
61 input,
62 select {
63 margin-left: 15px;
64 border-radius: 5px;
65 border-style: hidden;
66 height: 30px;
67 width: 140px;
68 background-color: rgba(216, 191, 216, 0.5);
69 outline: none;
70 color: #f0edf3;
71 padding-left: 10px;
72 }
73
74 .button {
75 border-color: cornsilk;
76 background-color: rgba(100, 149, 237, .7);
77 color: aliceblue;
78 border-style: hidden;
79 border-radius: 5px;
80 width: 100px;
81 height: 31px;
82 font-size: 16px;
83 }
84
85 .introduce {
86 margin-left: 110px;
87 }
88
89 .introduce>textarea {
90 background-color: rgba(216, 191, 216, 0.5);
91 border-style: hidden;
92 outline: none;
93 border-radius: 5px;
94 }
95
96 h1 {
97 text-align: center;
98 margin-bottom: 20px;
99 margin-top: 20px;
100 color: #f0edf3;
101 }
102
103 b {
104 margin-left: 50px;
105 color: #FFEB3B;
106 font-size: 10px;
107 font-weight: initial;
108 }
109 </style>
110 </head>
111
112 <body>
113 <div id="loginDiv">
114 <form action="">
115 <h1>REGESTER</h1>
116 <p>用户姓名:<input id="userNname" type="text" autofocus required><label id="name_trip"></label></p>
117
118 <p>用户密码:<input id="password" type="password" required><label id="password_trip"></label></p>
119
120 <p>确认密码:<input id="surePassword" type="password" required><label id="surePassword_trip"></label></p>
121
122 <p>
123 用户类型:
124 <select name="type" id="userType">
125 <option value="0">请选择</option>
126 <option value="1">普通类型</option>
127 <option value="2">VIP类型</option>
128 </select>
129 <label id="type_trip"></label>
130 </p>
131
132 <div class="sexDiv">
133 用户性别:
134 <input class="userSex" name="sex" value="boy" type="radio">男
135 <input class="userSex" name="sex" value="girl" type="radio">女
136 <label id="sex_trip"></label>
137 </div>
138
139 <p>
140 出生日期:
141 <input id="birthday" type="date">
142 <label id="birthday_trip"></label>
143 </p>
144
145 <p class="hobby">
146 兴趣爱好:
147 <input type="checkbox" name="hobby" value="read">阅读
148 <input type="checkbox" name="hobby" value="music">音乐
149 <input type="checkbox" name="hobby" value="sport">运动
150 <label id="hobby_trip"></label>
151 </p>
152
153 <p>
154 电子邮件:
155 <input id="email" type="email" required>
156 <label id="emil_trip"></label>
157 </p>
158
159
160 <p> 自我介绍:</p>
161 <div class="introduce">
162 <textarea name="introduce" cols="30" id="introduceText" required rows="10"></textarea>
163 <label id="introduce_trip"></label>
164 </div>
165
166 <p style="text-align: center;">
167 <input type="submit" class="button" onblur="checkForm()" onclick="return submitT()" value="提交">
168 <input type="reset" class="button" value="重置">
169 </p>
170 </form>
171 </div>
172
173 </body>
174 <script type="text/javascript">
175 function trip(obj, trip) {
176 document.getElementById(obj).innerHTML = "<b>" + trip + "</b>";
177 }
178
179 function checkSex() {
180 var sexNum = document.getElementsByName("sex");
181 var sex = "";
182 for (let i = 0; i < sexNum.length; ++i) {
183 if (sexNum[i].checked) {
184 sex = sexNum[i];
185 }
186
187 }
188 if (sex == "") {
189 trip("sex_trip", "ERROR!!");
190 return false;
191 } else {
192 trip("sex_trip", "OK!!");
193 }
194 }
195
196 function checkHobby() {
197 var hobbyNum = document.getElementsByName("hobby");
198 var hobby = "";
199 for (let i = 0; i < hobbyNum.length; ++i) {
200 if (hobbyNum[i].checked) {
201 hobby = hobbyNum[i];
202 }
203 }
204 if (hobby == "") {
205 trip("hobby_trip", "ERROR!!");
206 return false;
207 } else {
208 trip("hobby_trip", "OK!!");
209
210 }
211 }
212
213 function checkSelect() {
214 var myselect = document.getElementById("userType");
215 var index = myselect.selectedIndex;
216 var checkValue = myselect.options[index].value;
217 if (checkValue == 0) {
218 trip("type_trip", "请选择!!");
219 return false;
220 } else {
221 trip("type_trip", "OK!!");
222 }
223 }
224
225 function checkForm() {
226 checkSelect();
227 checkHobby();
228 checkSex();
229
230 var trip = document.getElementsByName("em");
231 var tripV = trip.innerHTML();
232 //获取用户名输入项
233 var userNname = document.getElementById("userNname");
234 var uName = userNname.value;
235 if (uName.length < 1 || uName.length > 10) {
236 trip("name_trip", "账号长度为1-10位!!");
237 return false;
238 } else {
239 trip("name_trip", "OK!!");
240
241 }
242
243 //密码长度大于6 和确认必须一致
244 var password = document.getElementById("password");
245 var userPass = password.value;
246 if (userPass.length < 6) {
247 trip("password_trip", "密码要>6位!!");
248 return false;
249 } else {
250 trip("password_trip", "OK!!");
251 }
252
253 //获取确认密码框的值 var
254 var surePassword = document.getElementById("surePassword");
255 var surePass = surePassword.value;
256 if (userPass != surePass) {
257 trip("surePassword_trip", "两次密码不一致!!");
258 return false;
259 }
260
261 //校验邮箱:/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
262 var inputEmail = document.getElementById("email");
263 var uEmail = inputEmail.value;
264 if (!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/.test(uEmail)) {
265 trip("emil_trip", "邮箱不合法!!");
266 return false;
267 } else {
268 trip("emil_trip", "OK!!");
269 }
270
271 // 校验自我介绍
272 var introduceText = document.getElementById("introduceText");
273 var introduce = introduceText.value;
274 if (introduce.length < 3 || uName.length > 60) {
275 trip("introduce_trip", "长度为3-50字!!");
276 return false;
277 } else {
278 trip("introduce_trip", "OK!!");
279 }
280
281 return true;
282 }
283
284 function submitT() {
285 if (checkForm()) {
286 return true;
287 } else {
288 return false;
289 }
290 }
291 </script>
293 </html>版权声明：本文为qq_36631580原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。