1.需求分析
之前我们已经使用弹出框的方式实现了表单校验的功能，但是此种方式用户体验效果极差！我们希望做成如下这种效果：
2. 技术分析
使用事件(聚焦事件onfocus和离焦事件onblur),之前使用onsubmit也需要！
使用
向页面指定位置写入内容：innerHTML属性(该属性的值存在覆盖现象)
3.步骤分析
第一步:确定事件(给出提示错误信息使用聚焦事件，给出校验结果信息使用离焦事件)， 并为其绑定函数
第二步:聚焦事件绑定的函数中(获取span给出提示信息)
第三步:离焦事件绑定的函数中(获取用户输入的内容进行判断)
第四步:如果失败，在span位置给出错误提示信息，如果成功，让span内容为空
4.代码实现
<html>
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<script>
function showTips(id,info){
document.getElementById(id+"span").innerHTML="<font color='red'>"+info+"</font>";
}
function check(id,info){
var uValue = document.getElementById(id).value
if(uValue==""){
document.getElementById(id+"span").innerHTML="<font color='red'>"+info+"</font>";
}
else{
document.getElementById(id+"span").innerHTML="";
}
}
</script>
<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"
onfocus="showTips('user','用户名必填')" onblur="check('user','用户名不能为空!')"/>
<span id="userspan"></span>
</td>
</tr>
<tr>
<td>
密码
</td>
<td>
<input type="password" name="password" size="34px" id="password"
onfocus="showTips('password','密码必填')" onblur="check('password','密码不能为空!')"/>
<span id="passwordspan"></span>
</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/yanzhengma.png"/>
</td>
<td>
验证码
</td>
<td>
<input type="text" name="yzm" />
<img src="../img/yanzhengma.png"/>
</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>
