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='/images/loading.gif' data-original="../img/logo2.png" height="47px" /> 53 </td> 54 <td width="33.3%"> 55 <img src='/images/loading.gif' data-original="../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='/images/loading.gif' data-original="../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='/images/loading.gif' data-original="../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(校验对象)为真表示符合条件，为假则不符合。
原标题：JavaScript学习——完成注册页面表单校验
关键词：JavaScript
我知道了 