1.需求分析
2.技术分析
2.1 获取元素内容
获取元素
document.getElementById(“id名称”);
获取元素里面的值
document.getElementById(“id名称”).value;
2.2 JavaScript 事件
表单提交事件：onsubmit
2.3 JavaScript 的输出
alert()：向页面中弹出一个提示框！！
innerHTML(属性)：向页面的某个元素中写一段内容，将原有的东西覆盖
document.write(“”):向页面中写内容
3.步骤分析
第一步：确定时间（onsubmit（））,并为其绑定一个函数
第二步：书写这个函数（获取用户输入的数据）
第三步：对输入的内容进行判断（非空）
第四步：如果输入内容为空，给出错误提示信息（alter），不让表单提交
第五步：如果输入内容合法，让表单提交
4.代码实现
效果图
```<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<script>
function checkForm(){
/*
1.校验用户名
获取用户名输入的内容
*/
var uValue = document.getElementById("user").value;
if(uValue == ""){
alert("用户名不能为空！");
return false;
}
/*2.校验密码*/
var pValue = document.getElementById("password").value;
if(pValue == ""){
alert("密码不能为空！");
return false;
}
/*校验确认密码*/
var rpValue = document.getElementById("repassword").value;
if(rpValue != pValue){
alert("两次密码不一致！");
return false;
}
/*校验邮箱*/
var eValue = document.getElementById("eamil").value;
if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
alert("邮箱格式不正确！");
return false;
}
}
</script>
</head>
<body>
<table border="1px" aligen="center" width="1300px" cellpadding="0px" cellspacing="0px">
<!--1.logo部分-->
<tr>
<td>
<!--嵌套一个一行三列的表格-->
<table border="1px" width="100%">
<tr height="50px">
<td width="33.3%">
<img scr="../img/logo2.png" height="47px" />
</td>
<td width="33.3%">
<img scr="../img/header.png" height="47px" />
</td>
<td width="33.3%">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--2.导航栏部分-->
<tr height="50px">
<td bgcolor="black">
<a href=" ">
<fontsize="5"color="white">首页</font>
</a> &nbs; 
<a href="#">
<fontcolor="white">手机数码</font>
</a>  
<a href="#">
<fontcolor="white">电脑办公</font>
</a>
<a href="#">
<font color="white">鞋靴箱包</font>
</a>  
<a href="#">
<font color=white>家用电器</font>
</a>
</td>
</tr>
<!--3.注册表单-->
<tr>
<td height="600px" background="../img/regist_bg.jpg">
<!--嵌套一个十行二列的表格-->
<form action="#" method="get" name="regForm" onsubmit="return checkForm()">
<table border="1px" width="750px" height="400px" align="center" cellpadding="Opx" cellspacing="Opx" bgcolor="white">
<tr height="40px">
<td colspan="2">
<font size="4">会员注册</font> USER REGISTER
</td>
</tr>
<td>
用户名
</td>
<td>
<input type="text" name="user” size="34px" id="user"/>
</td>
</tr>
<tr>
<td>
密码
</td>
<td>
<input type="password" name="password" size="34px" id="password"/>
</td>
</tr>
<tr>
<td>
确认密码
</td>
<td>
<input type="password" name="repassword" size="34px" id="repassword"></input>
</td>
</tr>
<tr>
<td>
Emaile
</td>
<td>
<input type="text" name="email" size="34px" id="eamil"/>
</td>
<tr>
<td>
Emaile
</td>
<td>
<input type="text" name="email" size="34px"id="eamil"/>
</td>
</tr>
<tr>
<td>
姓名</td>
<td>
<input type="text" name="username"size="34px"/>
</td>
</tr>
<tr>
<td>
性别</td>
<td>
<input type="radio" name="sex"value="男"/>男<input type="radio" name="sex"value="女"/>女
</td>
</tr>
<tr>
<td>
出生日期
</td>
<td>
<input type="text" name="birthday" size="34px"/>
</td>
</tr>
<tr>
<td>
验证码
</td>
<td>
<input type="text" name="yzm”/> <img src="../../桌面壁纸/img/1.jpg"/>
</td>
<td>
验证码
</td>
<td>
<input type="text" name="yzm" />
<img src="../../桌面壁纸/img/1.jpg"/>
</td></tr><tr>
<td colspan="2">
<input type="submit" value="注册"/>
</td>
</tr>
</table>
</form>
</td>
</tr>
<!--4.广告图片-->
<tr>
<td>
<img src="../img/footer.jpg" width="100%"/>
</td>
</tr>
<!--5友情链接和版权信息-->
<tr>
<td align="center">
<a href=" ">关于我们</a>
<a href="#">联系我们</a>
<a href="#">招贷纳士</a>
<a href="#">法律声明</a>
<a href="#">爱情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明</a>
<p>
Copyright电子商城 版权所有
</p>
</td>
</tr>
</table>
</body>
</html>
