1、步骤分析
第一步：确定事件(onsubmit)并为其绑定一个函数
第二步：书写这个函数(获取用户输入的数据<获取数据时需要在指定位置定义一个 id>)
第三步：对用户输入的数据进行判断
第四步：数据合法(让表单提交)
第五步：数据非法(给出错误提示信息，不让表单提交)
问题：如何控制表单提交？
关于事件 onsubmit：一般用于表单提交的位置，那么需要在定义函数的时候给出一个 返回值。
onsubmit = return checkForm()
2、完成注册页面表单校验（基于HTML&CSS——网站注册页面）
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>注册页面</title>
6 <script>
7 function checkForm(){
8 //alert("aa");
9
10 /**校验用户名*/
11 //1.获取用户输入的数据
12 var uValue=document.getElementById("user").value;
13 //alert(uValue);
14 if(uValue==""){
15 //2.给出错误提示信息
16 alert("用户名不能为空");
17 return false;
18 }
19
20 /**校验密码*/
21 var pValue=document.getElementById("password").value;
22 if(pValue==""){ //注意空的表示方法
23 alert("密码不能为空");
24 return false;
25 }
26
27 /** 校验确认密码*/
28 var rpValue=document.getElementById("repassword").value;
29 if(rpValue!=pValue){
30 alert("两次密码输入不一致！");
31 return false;
32 }
33
34 /**校验邮箱*/
35 var eValue=document.getElementById("email").value;
36 if(！/^([a-zA-Z0-9_-])[email protected]([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
37 alert("邮箱格式不正确！");
38 }
39 }
40 </script>
41 </head>
42 <body>
43 <table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px">
44
45 <!--1.logo部分-->
46 <tr>
47 <td>
48 <!--嵌套一个一行三列的表格-->
49 <table border="1px" width="100%">
50 <tr height="50px">
51 <td width="33.3%">
52 <img src="../img/logo2.png" height="47px" />
53 </td>
54 <td width="33.3%">
55 <img src="../img/header.png" height="47px"/>
56 </td>
57 <td width="33.3%">
58 <a href="#">登录</a>
59 <a href="#">注册</a>
60 <a href="#">购物车</a>
61 </td>
62 </tr>
63 </table>
64 </td>
65 </tr>
66
67 <!--2.导航栏部分-->
68 <tr height="50px" >
69 <td bgcolor="black">
70 <a href="#"><font size="3" color="white">首页</font></a>
71 <a href="#"><font color="white">手机数码</font></a>
72 <a href="#"><font color="white">电脑办公</font></a>
73 <a href="#"><font color="white">鞋靴箱包</font></a>
74 <a href="#"><font color="white">家用电器</font></a>
75 </td>
76 </tr>
77
78 <!--3.注册表单-->
79 <tr>
80 <td height="600px" background="../img/regist_bg.jpg">
81 <!--嵌套一个十行二列的表格-->
82 <form action="#" method="get" name="regForm" onsubmit="return checkForm()">
83 <table border="1px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
84 <tr height="40px">
85 <td colspan="2">
86 <font size="4">会员注册</font> USER REGISTER
87 </td>
88 </tr>
89 <tr>
90 <td>用户名</td>
91 <td>
92 <input type="text" name="user" size="35px" id="user"/>
93 </td>
94 </tr>
95 <tr>
96 <td>密码</td>
97 <td>
98 <input type="password" name="password" size="35px" id="password"/>
99 </td>
100 </tr>
101 <tr>
102 <td>确认密码</td>
103 <td>
104 <input type="password" name="repassword" size="35px" id="repassword"/>
105 </td>
106 </tr>
107 <tr>
108 <td>E-mail</td>
109 <td>
110 <input type="text" name="e-mail" size="35px" id="email"/>
111 </td>
112 </tr>
113 <tr>
114 <td>姓名</td>
115 <td>
116 <input type="text" name="username" size="35px"/>
117 </td>
118 </tr>
119 <tr>
120 <td>性别</td>
121 <td>
122 <input type="radio" name="sex" value="男"/>男
123 <input type="radio" name="sex" value="女"/>女
124 </td>
125 </tr>
126 <tr>
127 <td>出生日期</td>
128 <td>
129 <input type="text" name="birthday" size="35px"/>
130 </td>
131 </tr>
132 <tr>
133 <td>验证码</td>
134 <td>
135 <input type="text" name="yzm" />
136 <img src="../img/yanzhengma.png" />
137 </td>
138 </tr>
139 <tr align="center">
140 <td colspan="2">
141 <input type="submit" value="注册" />
142 </td>
143 </tr>
144 </table>
145 </form>
146 </td>
147 </tr>
148
149 <!--4.广告图片-->
150 <tr>
151 <td>
152 <img src="../img/footer.jpg" width="100%"/>
153 </td>
154 </tr>
155
156 <!--5.友情链接和版权信息-->
157 <tr>
158 <td align="center">
159 <a href="#"><font>关于我们</font></a>
160 <a href="#"><font>联系我们</font></a>
161 <a href="#"><font>招贤纳士</font></a>
162 <a href="#"><font>法律声明</font></a>
163 <a href="#"><font>友情链接</font></a>
164 <a href="#"><font>支付方式</font></a>
165 <a href="#"><font>配送方式</font></a>
166 <a href="#"><font>服务声明</font></a>
167 <a href="#"><font>广告声明</font></a>
168 <p>
169 Copyright ? 2005-2016 hh商城 版权所有
170 </p>
171 </td>
172 </tr>
173 </table>
174 </body>
175 </html>
在校验确认密码这部分使用了正则表达式（不需要记忆，需要时查找文档）正则式.test(校验对象)为真表示符合条件，为假则不符合。
时间： 2024-10-14 08:53:54