1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <script>
7
8
9 window.onclick = function () {
10 document.getElementById("form").onsubmit = function () {
11 return checkUsername() && checkPassword() && checkEmail();
12 }
13 document.getElementById("username").onblur = checkUsername;
14
15 document.getElementById("password").onblur = checkPassword;
16
17 document.getElementById("email").onblur = checkEmail;
18
19
20 document.getElementById("name").onblur=checkName;
21 document.getElementById("tel").onblur=checkTel;
22
23 }
24
25 function checkUsername() {
26 var username = document.getElementById("username").value;
27 var reg = /^\w{6,12}$/;
28 var flag = reg.test(username);
29 var s_username = document.getElementById("s_username");
30 if (flag) {
31 s_username.innerHTML = "<img src='img/gou.png' width='35px' height='25px'>";
32 } else {
33 s_username.innerHTML = "用户名格式有误！";
34 }
35 }
36
37 function checkPassword() {
38 var password = document.getElementById("password").value;
39 var s_password = document.getElementById("s_password");
40 var reg = /^\w{6,12}$/;
41 var flag = reg.test(password);
42 if (flag) {
43 s_password.innerHTML = "<img src='img/gou.png' width='35px' height='25px'>";
44
45 } else {
46 s_password.innerHTML = "密码格式有误！";
47 }
48
49 }
50
51
52 function checkEmail() {
53 var email = document.getElementById("email").value;
54 var s_email = document.getElementById("s_email");
55 var reg = /^\w{6,12}/;
56 var flag = reg.test(email);
57 if (flag) {
58 s_email.innerHTML = "<img src='img/gou.png' width='35px' height='25px'>";
59
60 } else {
61 s_email.innerHTML = "邮箱输入错误!";
62 }
63 }
64
65 function checkName() {
66 var name = document.getElementById("name").value;
67 var s_name = document.getElementById("s_name");
68 var reg = /^\w{1,12}$/;
69 var flag = reg.test(name);
70 if (flag) {
71 s_name.innerHTML = "<img src='img/gou.png' width='35px' height='25px'>";
72
73 } else {
74 s_name.innerHTML = "名字输入有误！";
75 }
76
77
78 }
79
80 function checkTel() {
81 var tel = document.getElementById("tel").value;
82 var s_tel = document.getElementById("s_tel");
83 var reg = /^\w{6,12}$/;
84 var flag = reg.test(tel);
85 if(flag){
86 s_tel.innerHTML="<img src='img/gou.png' width='35px' height='25px'>";
87
88 }else{
89 s_tel.innerHTML= "邮箱输入有误！";
90 }
91 }
92
93 </script>
94
95
96 <style>
97 .error {
98 color: red;
99 }
100
101
102 * {
103 margin: 0px;
104 padding: 0px;
105 box-sizing: border-box;
106 }
107
108 body {
109 background: url("img/register_bg.png");
110 padding: 30px;
111 }
112
113 .BigBox {
114 width: 900px;
115 height: 500px;
116 border: 8px solid #EEEEEE;
117 background-color: white;
118 /*让div水平居中*/
119 margin: auto;
120 }
121
122 /*<!--left_layout-->*/
123 .left_layout {
124 margin: 15px;
125 float: left;
126 }
127
128 #txt_reg1 {
129 color: #FFD026;
130 font-size: 20px;
131
132 }
133
134 #txt_reg2 {
135 color: #A6A6A6;
136 font-size: 22px;
137 }
138
139 /*<!--center_layout-->*/
140 .center_layout {
141 float: left;
142 margin: 15px;
143 }
144
145 .center_layout table {
146 /*合并边框模型*/
147 border-collapse: separate;
148 /*相邻单元的边框之间的距离*/
149 border-spacing: 2px;
150 border-color: gray;
151 }
152
153 .td_left {
154 width: 100px;
155 text-align: right;
156 height: 45px;
157 }
158
159 .td_right {
160 padding-left: 50px;
161 }
162
163 #username, #password, #email, #name, #tel, #birthday, #verify_code {
164 width: 250px;
165 height: 32px;
166 border: 1px solid #A6A6A6;
167 border-radius: 5px;
168 padding-left: 10px;
169 }
170
171 #verify_code {
172 width: 110px;
173 }
174
175 #img_verify_code {
176 height: 32px;
177 /*垂直居中*/
178 vertical-align: middle;
179 }
180
181 #btn_submit {
182 width: 130px;
183 height: 40px;
184 background-color: #FFD026;
185 border: 1px solid #FFD026;
186 }
187
188 /*<!--right_layout-->*/
189 .right_layout {
190 float: right;
191 margin: 15px;
192 }
193
194 a:link {
195 color: pink;
196 }
197
198 a:hover {
199 color: green;
200 }
201
202 a:active {
203 color: yellow;
204 }
205
206 a:visited {
207 color: red;
208 }
209
210 .right_layout div {
211 float: left;
212 }
213 </style>
214 </head>
215 <body>
216 <div class="BigBox">
217 <!--left_layout-->
218 <div class="left_layout">
219 <div id="txt_reg1">新用户注册</div>
220 <div id="txt_reg2">USER REGISTER</div>
221 </div>
222 <!--center_layout-->
223 <div class="center_layout">
224 <!--定义表单 form-->
225 <form action="#" method="post" id="form">
226 <table>
227 <tbody>
228 <tr>
229 <td class="td_left">
230 <label for="username">用户名</label>
231
232 </td>
233 <td class="td_right">
234 <input type="text" name="username" id="username" placeholder="请输入用户名">
235 <span id="s_username" class="error"></span>
236 </td>
237
238 </tr>
239
240 <tr>
241 <td class="td_left">
242 <label for="password">密码</label>
243 </td>
244 <td class="td_right">
245 <input type="password" name="password" id="password" placeholder="请输入密码">
246 <span id="s_password" class="error"></span>
247 </td>
248 </tr>
249
250 <tr>
251 <td class="td_left">
252 <label for="email">Email</label>
253
254 </td>
255 <td class="td_right">
256 <input type="email" name="email" id="email" placeholder="请输入邮箱">
257 <span id="s_email" class="error"></span>
258 </td>
259 </tr>
260
261 <tr>
262 <td class="td_left">
263 <label for="name">姓名</label>
264 </td>
265 <td class="td_right">
266 <input type="text" name="name" id="name" placeholder="请输入姓名">
267 <span id="s_name" class="error"></span>
268 </td>
269 </tr>
270
271 <tr>
272 <td class="td_left">
273 <label for="tel">手机号</label>
274 </td>
275 <td class="td_right">
276 <input type="text" name="tel" id="tel" placeholder="请输入手机号">
277 <span id="s_tel" class="error"></span>
278 </td>
279 </tr>
280
281 <tr>
282 <td class="td_left">
283 <label>性别</label>
284 </td>
285 <td class="td_right">
286 <input type="radio" name="gender" value="male" checked> 男
287 <input type="radio" name="gender" value="female"> 女
288 </td>
289 </tr>
290
291 <tr>
292 <td class="td_left">
293 <label for="birthday">出生日期</label>
294 </td>
295 <td class="td_right">
296 <input type="date" name="birthday" id="birthday">
297 </td>
298 </tr>
299
300 <tr>
301 <td class="td_left">
302 <label for="verify_code">验证码</label>
303 <td class="td_right">
304 <input type="text" name="verify_code" id="verify_code">
305 <img src="img/verify_code.jpg" id="img_verify_code">
306 </td>
307 </tr>
308 <tr>
309 <td colspan="2" align="center">
310 <input type="submit" value="注册" id="btn_submit">
311 </tr>
312
313 </tbody>
314 </table>
315 </form>
316 </div>
317 <!--right_layout-->
318 <div class="right_layout">
319 <div>已有账号?</div>
320 <div><a href="#">立即登录</a></div>
321
322 </div>
323 </div>
324 </body>
325 </html>