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_-])+@([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(校验对象)为真表示符合条件，为假则不符合。