web注册页面的表单校验

我们每天都会见到不同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>

运行截图：

posted @ 2020-09-24 19:34 令狐公子♥ 阅读(837) 评论(0) 收藏举报

刷新页面返回顶部

令狐公子♥

web注册页面的表单校验

公告