我们每天都会见到不同web页面，各种注册页面相信大家也不陌生，不知道大家有没有留意过一件事情，就是当我们填完每一项内容，当鼠标离开当前输入框之后，对应的输入框后面就会提示我们输入的用户名或者密码是否符合规范，提醒我们做出相应的修改。这就是表单的校验，只有当输入项符合相应的规范后才会对服务器进行数据的提交。今天我们就来了解一下这项技术背后的原理以及代码的实现。
今天的内容涉及是前端方面的知识，需要大家提前了解html、css、javascript相关的知识，当然如果大家这方面的知识比较薄弱，但是又比较感兴趣，那就在自己的电脑上跑一跑，相信对大家也是一种提升呢！
首先，我们先来了解一下html、css、javascript在网页开发中的作用：
html:用于搭建基础网页，展示页面的内容。
css:用于美化页面，布局页面。
javascript:可以增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。
下面我会分别向大家展示纯html写出来的页面、html+css的页面和html+css+javascript的页面效果，让大家有更直观
的体会！
html相关标签介绍:
<form> 标签用于为用户输入创建 HTML 表单。
表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
表单用于向服务器传输数据。
<input> 标签用于搜集用户信息。
根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、
单选按钮、按钮等等。
<table> 标签定义 HTML 表格。
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
实现思想：
1.由于table标签可以定义HTML表格，所以注册界面的布局我们使用table标签来实现。
定义一个表格，里面包含用户名、密码、Email等信息以及对应的输入框。
2.由于form标签用于将用户输入的信息向服务器端提交，所以我们将table嵌入在form标签内，
从而实现用户数据的提交。
源码：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>注册页面html</title>
6 </head>
7 <body>
8
9 <form action="#" method="post">
10
11 <table width="30%" align="center" border="1px solid">
12 <!--用户名-->
13 <tr>
14 <td>
15 <label for="username">用户名</label>
16 </td>
17 <td>
18 <input type="text" name="username" placeholder="请输入用户名" id="username">
19 </td>
20 </tr>
21 <!--密码-->
22 <tr>
23 <td>
24 <label for="password">密码</label>
25 </td>
26 <td>
27 <input type="password" name="password" placeholder="请输入密码" id="password">
28 </td>
29 </tr>
30 <!--Email-->
31 <tr>
32 <td>
33 <label for="email">Email</label>
34 </td>
35 <td>
36 <input type="email" name="email" placeholder="请输入Email" id="email">
37 </td>
38 </tr>
39 <!--姓名-->
40 <tr>
41 <td>
42 <label for="name">姓名</label>
43 </td>
44 <td>
45 <input type="text" name="name" placeholder="请输入真实姓名" id="name">
46 </td>
47 </tr>
48 <!--手机号-->
49 <tr>
50 <td>
51 <label for="tel">手机号</label>
52 </td>
53 <td>
54 <input type="number" name="tel" placeholder="请输入手机号" id="tel">
55 </td>
56 </tr>
57 <!--性别-->
58 <tr>
59 <td>
60 <label>性别</label>
61 </td>
62 <td>
63 <input type="radio" name="gender" value="male" checked>男
64 <input type="radio" name="gender" value="female" >女
65 </td>
66 </tr>
67 <!--出生日期-->
68 <tr>
69 <td>
70 <label for="birthday">出生日期</label>
71 </td>
72 <td>
73 <input type="date" name="birthday" id="birthday">
74 </td>
75 </tr>
76 <!--验证码-->
77 <tr>
78 <td>
79 <label for="checkcode">验证码</label>
80 </td>
81 <td>
82 <input type="text" name="checkcode" id="checkcode">
83 <img src="img2/verify_code.jpg">
84 </td>
85 </tr>
86 <!--注册-->
87 <tr>
88 <td colspan="2" align="center">
89 <input type="submit" value="注册">
90 </td>
91 </tr>
92 </table>
93
94 </form>
95
96
97 </body>
98 </html>
运行截图：
html+css:
css用于页面的美化和布局的调整，这里我提供一些常用的选择器和属性，供大家参考，更多的与css相关的信息
大家可以查看参考文档，上面有详细的介绍。
选择器：
.class 选择器选取带有指定类 (class) 的元素。
实例：
为 class="hometown" 的所有 <p> 元素设置样式：
p.hometown
{
background-color:yellow;
}
#id 选择器为带有指定 id 的元素设置样式。
实例
为 id="firstname" 的元素设置样式：
#firstname
{
background-color:yellow;
}
element 选择器用于指定元素名称的所有元素。
实例
选择并设置所有 <p> 元素的样式：
p
{
background-color:yellow;
}
* 选择器选取所有元素。
实例
选取 <div> 元素内部的所有元素：
div *
{
background-color:yellow;
}
属性：
color：设置文本的颜色。
line-height：设置行高。
text-align：规定文本的水平对齐方式。
font-size：规定文本的字体尺寸。
background：在一个声明中设置所有的背景属性。
border：在一个声明中设置所有的边框属性。
padding：在一个声明中设置所有内边距属性。
margin：在一个声明中设置所有外边距属性。
height：设置元素高度。
width：设置元素的宽度。
源码：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>注册页面css</title>
6
7 <style>
8 *{
9 margin: 0px;
10 padding: 0px;
11 box-sizing: border-box;
12 }
13
14 body{
15 background: url("img2/register_bg.png") no-repeat;
16 width: 100%;
17 height: 100%;
18 padding-top: 25px;
19 }
20
21 .layout{
22 width: 900px;
23 height: 500px;
24 background: white;
25 border: 8px darkgrey solid;
26 margin: auto;
27 }
28
29 .div1{
30 /*border: 1px red solid;*/
31 float: left;
32 margin-left: 15px;
33 margin-top: 20px;
34 }
35
36 .div1_1{
37 color: gold;
38 font-size:20px;
39 }
40
41 .div1_2{
42 font-size: 20px;
43 color: darkgrey;
44 }
45
46 .div2{
47 /*border: 1px red solid;*/
48 float: left;
49 margin-left: 15px;
50 }
51
52 .td_left{
53 text-align: right;
54 height: 45px;
55 color: darkgrey;
56 width: 100px;
57 }
58
59 .td_right{
60 padding-left: 50px;
61 }
62
63 #username,#password,#email,#name,#tel,#checkcode,#birthday{
64 width: 251px;
65 height: 32px;
66 border-radius: 5px;
67 border: darkgrey 1px solid;
68 padding-left: 15px;
69 }
70
71 #checkcode{
72 width: 120px;
73 }
74
75 .img{
76 height: 32px;
77 vertical-align: middle;
78 }
79
80 .btu_sub{
81 width: 120px;
82 height: 40px;
83 border: gold 1px solid;
84 background: gold;
85 }
86
87 .div3{
88 /*border: 1px red solid;*/
89 float: right;
90 margin-top: 20px;
91 margin-right: 15px;
92 }
93
94 .div3_1{
95 font-size: 13px;
96 }
97
98 .div3_1_first{
99 color: pink;
100 }
101
102 </style>
103
104 </head>
105 <body>
106
107 <div class="layout">
108 <div class="div1">
109 <div class="div1_1">
110 新用户注册
111 </div>
112 <div class="div1_2">
113 USER REGISTER
114 </div>
115 </div>
116
117 <div class="div2">
118 <form action="#" method="post" class="form">
119
120 <table class="table">
121 <!--用户名-->
122 <tr>
123 <td class="td_left">
124 <label for="username">用户名</label>
125 </td>
126 <td class="td_right">
127 <input type="text" name="username" placeholder="请输入用户名" id="username">
128 </td>
129 </tr>
130 <!--密码-->
131 <tr>
132 <td class="td_left">
133 <label for="password">密码</label>
134 </td>
135 <td class="td_right">
136 <input type="password" name="password" placeholder="请输入密码" id="password">
137 </td>
138 </tr>
139 <!--Email-->
140 <tr>
141 <td class="td_left">
142 <label for="email">Email</label>
143 </td>
144 <td class="td_right">
145 <input type="email" name="email" placeholder="请输入Email" id="email">
146 </td>
147 </tr>
148 <!--姓名-->
149 <tr>
150 <td class="td_left">
151 <label for="name">姓名</label>
152 </td>
153 <td class="td_right">
154 <input type="text" name="name" placeholder="请输入真实姓名" id="name">
155 </td>
156 </tr>
157 <!--手机号-->
158 <tr>
159 <td class="td_left">
160 <label for="tel">手机号</label>
161 </td>
162 <td class="td_right">
163 <input type="number" name="tel" placeholder="请输入手机号" id="tel">
164 </td>
165 </tr>
166 <!--性别-->
167 <tr>
168 <td class="td_left">
169 <label>性别</label>
170 </td>
171 <td class="td_right">
172 <input type="radio" name="gender" value="male" checked>男
173 <input type="radio" name="gender" value="female" >女
174 </td>
175 </tr>
176 <!--出生日期-->
177 <tr>
178 <td class="td_left">
179 <label for="birthday">出生日期</label>
180 </td>
181 <td class="td_right">
182 <input type="date" name="birthday" id="birthday">
183 </td>
184 </tr>
185 <!--验证码-->
186 <tr>
187 <td class="td_left">
188 <label for="checkcode">验证码</label>
189 </td>
190 <td class="td_right">
191 <input type="text" name="checkcode" id="checkcode">
192 <img src="img2/verify_code.jpg" class="img">
193 </td>
194 </tr>
195 <!--注册-->
196 <tr>
197 <td colspan="2" align="center">
198 <input type="submit" class="btu_sub" value="注册">
199 </td>
200 </tr>
201 </table>
202
203 </form>
204 </div>
205
206 <div class="div3">
207 <div class="div3_1">
208 已有账号？<a class="div3_1_first" href="#">立即登录</a>
209 </div>
210 </div>
211 </div>
212
213 </body>
214 </html>
运行截图：
html+css+javascript:
在这里我们来实现表单的校验功能，此处用到了事件监听机制，我们先来了解一下相关原理：
事件监听机制：
* 概念：某些组件被执行了某些操作后，触发某些代码的执行。
* 事件：某些操作。如： 单击，双击，键盘按下了，鼠标移动了。
* 事件源：组件。如： 按钮 文本输入框...
* 监听器：代码。
* 注册监听：将事件，事件源，监听器结合在一起。 当事件源上发生了某个事件，则触发执行某个监听器
代码。
用到的事件：
1. onblur：离焦事件，用于判断鼠标是否离开当前输入框。
2. onsubmit：表单事件，确认按钮被点击，用于判断表单是否点击提交按钮。
实现步骤：
1.给表单绑定onsubmit事件，监听器中判断每一个方法校验的结果。
如果都为true，则监听器方法返回true，正常提交表单。
如果有一个为false，则监听器方法返回false，阻止表单的提交。
2.定义一些方法分别校验各个表单项。
3.给各个表单绑定onblur事件。
校验用户名等方法的实现步骤：
1.获取用户名的值。
2.定义用于判断的正则表达式。
3.判断获取到的值是否符合正则表达式的规则。
4.显示提示信息。
如果符合规范，则显示√符号。
如果不符合规范，则在输入框后面显示相关的提示信息。
相关正则表达式的校验规则：
用户名：6-18位，字母或数字
/^\w{6,18}$/
密码：6-20 位，字母或数字
/^\w{6,20}$/
校验邮箱：数字或字母+@+小写字母或数字+ . +小写字母
/^\w+@[a-z0-9]+\.[a-z]{2,4}$/
校验姓名：汉字
/^[\u2E80-\u9FFF]+$/
校验手机号：以1开头的11为数字
/^1[0-9]{10}$/
关于正则表达式的定义规则，大家可以查询https://www.w3school.com.cn/js/js_regexp.asp，可以根据自己的
实际情况做出相应的修改。
源码：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>表单校验</title>
6
7 <style>
8 *{
9 margin: 0px;
10 padding: 0px;
11 box-sizing: border-box;
12 }
13
14 body{
15 background: url("img2/register_bg.png") no-repeat;
16 width: 100%;
17 height: 100%;
18 padding-top: 25px;
19 }
20
21 .layout{
22 width: 900px;
23 height: 500px;
24 background: white;
25 border: 8px darkgrey solid;
26 margin: auto;
27 }
28
29 .div1{
30 /*border: 1px red solid;*/
31 float: left;
32 margin-left: 15px;
33 margin-top: 20px;
34 }
35
36 .div1_1{
37 color: gold;
38 font-size:20px;
39 }
40
41 .div1_2{
42 font-size: 20px;
43 color: darkgrey;
44 }
45
46 .div2{
47 /*border: 1px red solid;*/
48 float: left;
49 margin-left: 15px;
50 }
51
52 .td_left{
53 text-align: right;
54 height: 45px;
55 color: darkgrey;
56 width: 100px;
57 }
58
59 .td_right{
60 padding-left: 50px;
61 }
62
63 #username,#password,#email,#name,#tel,#checkcode,#birthday{
64 width: 251px;
65 height: 32px;
66 border-radius: 5px;
67 border: darkgrey 1px solid;
68 padding-left: 15px;
69 }
70
71 #checkcode{
72 width: 120px;
73 }
74
75 .img{
76 height: 32px;
77 vertical-align: middle;
78 }
79
80 .btu_sub{
81 width: 120px;
82 height: 40px;
83 border: gold 1px solid;
84 background: gold;
85 }
86
87 .div3{
88 /*border: 1px red solid;*/
89 float: right;
90 margin-top: 20px;
91 margin-right: 15px;
92 }
93
94 .div3_1{
95 font-size: 13px;
96 }
97
98 .div3_1_first{
99 color: pink;
100 }
101
102 .error{
103 color: red;
104 font-size: 6px;
105 }
106
107 </style>
108
109 </head>
110 <body>
111
112 <div class="layout">
113 <div class="div1">
114 <div class="div1_1">
115 新用户注册
116 </div>
117 <div class="div1_2">
118 USER REGISTER
119 </div>
120 </div>
121
122 <div class="div2">
123 <form action="#" method="get" id="form">
124
125 <table class="table">
126 <!--用户名-->
127 <tr>
128 <td class="td_left">
129 <label for="username">用户名</label>
130 </td>
131 <td class="td_right">
132 <input type="text" name="username" placeholder="请输入用户名" id="username">
133 <span id="s_username" class="error"></span>
134 </td>
135 </tr>
136 <!--密码-->
137 <tr>
138 <td class="td_left">
139 <label for="password">密码</label>
140 </td>
141 <td class="td_right">
142 <input type="password" name="password" placeholder="请输入密码" id="password">
143 <span id="s_password" class="error"></span>
144 </td>
145 </tr>
146 <!--Email-->
147 <tr>
148 <td class="td_left">
149 <label for="email">Email</label>
150 </td>
151 <td class="td_right">
152 <input type="email" name="email" placeholder="请输入Email" id="email">
153 <span id="s_email" class="error"></span>
154 </td>
155 </tr>
156 <!--姓名-->
157 <tr>
158 <td class="td_left">
159 <label for="name">姓名</label>
160 </td>
161 <td class="td_right">
162 <input type="text" name="name" placeholder="请输入真实姓名" id="name">
163 <span id="s_name" class="error"></span>
164 </td>
165 </tr>
166 <!--手机号-->
167 <tr>
168 <td class="td_left">
169 <label for="tel">手机号</label>
170 </td>
171 <td class="td_right">
172 <input type="number" name="tel" placeholder="请输入手机号" id="tel">
173 <span id="s_tel" class="error"></span>
174 </td>
175 </tr>
176 <!--性别-->
177 <tr>
178 <td class="td_left">
179 <label>性别</label>
180 </td>
181 <td class="td_right">
182 <input type="radio" name="gender" value="male" checked>男
183 <input type="radio" name="gender" value="female" >女
184 </td>
185 </tr>
186 <!--出生日期-->
187 <tr>
188 <td class="td_left">
189 <label for="birthday">出生日期</label>
190 </td>
191 <td class="td_right">
192 <input type="date" name="birthday" id="birthday">
193 </td>
194 </tr>
195 <!--验证码-->
196 <tr>
197 <td class="td_left">
198 <label for="checkcode">验证码</label>
199 </td>
200 <td class="td_right">
201 <input type="text" name="checkcode" id="checkcode">
202 <img src="img2/verify_code.jpg" class="img">
203 </td>
204 </tr>
205 <!--注册-->
206 <tr>
207 <td colspan="2" align="center">
208 <input type="submit" class="btu_sub" value="注册">
209 </td>
210 </tr>
211 </table>
212
213 </form>
214 </div>
215
216 <div class="div3">
217 <div class="div3_1">
218 已有账号？<a class="div3_1_first" href="#">立即登录</a>
219 </div>
220 </div>
221 </div>
222
223
224 <script>
225
226 //给表单绑定onsubmiit事件
227 document.getElementById("form").onsubmit = function () {
228 //判断每一个方法的校验结果
229 return checkusername() && checkpassword() && checkemail()
230 && checkname() && checktel();
231 }
232
233 //给每个表单绑定onblur事件
234 document.getElementById("username").onblur = checkusername;
235 document.getElementById("password").onblur = checkpassword;
236 document.getElementById("email").onblur = checkemail;
237 document.getElementById("name").onblur = checkname;
238 document.getElementById("tel").onblur = checktel;
239
240 //验证username
241 function checkusername() {
242 //获取用户名的值
243 var username = document.getElementById("username").value;
244 //定义正则表达式
245 var reg = /^\w{6,18}$/;
246 //判断是否符合正则表达式的规则
247 var flag = reg.test(username);
248 var s_username = document.getElementById("s_username");
249 //显示提示信息
250 if(flag){
251 s_username.innerHTML = "<img src='img3/gou.png' width='40px' height='25px'>";
252 }else{
253 s_username.innerHTML = "用户名格式错误！";
254 }
255 return flag;
256 }
257
258 //验证password
259 function checkpassword() {
260 //获取用户名的值
261 var password = document.getElementById("password").value;
262 //定义正则表达式
263 var reg = /^\w{6,20}$/;
264 //判断是否符合正则表达式的规则
265 var flag = reg.test(password);
266 var s_password = document.getElementById("s_password");
267 //显示提示信息
268 if(flag){
269 s_password.innerHTML = "<img src='img3/gou.png' width='40px' height='25px'>";
270 }else{
271 s_password.innerHTML = "密码格式错误！";
272 }
273 return flag;
274 }
275
276 //验证email
277 function checkemail() {
278 //获取用户名的值
279 var email = document.getElementById("email").value;
280 //定义正则表达式
281 var reg = /^\w+@[a-z0-9]+\.[a-z]{2,4}$/;
282 //判断是否符合正则表达式的规则
283 var flag = reg.test(email);
284 var s_email = document.getElementById("s_email");
285 //显示提示信息
286 if(flag){
287 s_email.innerHTML = "<img src='img3/gou.png' width='40px' height='25px'>";
288 }else{
289 s_email.innerHTML = "Email格式错误！";
290 }
291 return flag;
292 }
293
294 //验证姓名
295 function checkname() {
296 //获取用户名的值
297 var name = document.getElementById("name").value;
298 //定义正则表达式
299 var reg = /^[\u2E80-\u9FFF]+$/;
300 //判断是否符合正则表达式的规则
301 var flag = reg.test(name);
302 var s_name = document.getElementById("s_name");
303 //显示提示信息
304 if(flag){
305 s_name.innerHTML = "<img src='img3/gou.png' width='40px' height='25px'>";
306 }else{
307 s_name.innerHTML = "姓名不正确！";
308 }
309 return flag;
310 }
311
312 //验证手机号
313 function checktel() {
314 //获取用户名的值
315 var tel = document.getElementById("tel").value;
316 //定义正则表达式
317 var reg = /^1[0-9]{10}$/;
318 //判断是否符合正则表达式的规则
319 var flag = reg.test(tel);
320 var s_tel = document.getElementById("s_tel");
321 //显示提示信息
322 if(flag){
323 s_tel.innerHTML = "<img src='img3/gou.png' width='40px' height='25px'>";
324 }else{
325 s_tel.innerHTML = "电话号码错误！";
326 }
327 return flag;
328 }
329
330
331
332 </script>
333
334 </body>
335 </html>
运行截图：
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
