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