1、之前我们已经使用弹出框的方式实现了表单校验的功能，但是此种方式用户体验效果很差
我们希望做成把提示信息和校验结果放在输入栏的后面。
2、步骤分析 （此案例基于HTML&CSS——网站注册页面实现的）
第一步：确定事件(onfocus 聚焦事件)并为其绑定一个函数
第二步：书写绑定函数(在输入框的后面给出提示信息)
第三步：确定事件(onblur 离焦事件)并为其绑定一个函数
第四步：书写函数(对数据进行校验，分别给出提示)
JS代码：（传入参数的目的减少重复代码，增加通用性）
<script>
function showTips(id,info){
document.getElementById(id+"span").innerHTML="<font color='gray'>"+info+"</font>";
}
function check(id,info){
//1.获取用户输入的用户名数据
var uValue=document.getElementById(id).value;
//2.进行校验
if(uValue==""){
document.getElementById(id+"span").innerHTML="<font color='red'>"+info+"</font>";
}else{
document.getElementById(id+"span").innerHTML="";
}
}
</script>
HTML代码：
<input type="text" name="user" size="35px" id="user" onfocus="showTips('user','用户名必填！')" onblur="check('user','用户名不能为空!')"/><span id="userspan"></span>
最终代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<script>
function showTips(id,info){
document.getElementById(id+"span").innerHTML="<font color='gray'>"+info+"</font>";
}
function check(id,info){
//1.获取用户输入的用户名数据
var uValue=document.getElementById(id).value;
//2.进行校验
if(uValue==""){
document.getElementById(id+"span").innerHTML="<font color='red'>"+info+"</font>";
}else{
document.getElementById(id+"span").innerHTML="";
}
}
</script>
</head>
<body>
<table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px"> <!--1.logo部分-->
<tr>
<td>
<!--嵌套一个一行三列的表格-->
<table border="1px" width="100%">
<tr height="50px">
<td width="33.3%">
<img src="../img/logo2.png" height="47px" />
</td>
<td width="33.3%">
<img src="../img/header.png" height="47px"/>
</td>
<td width="33.3%">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</td>
</tr>
</table>
</td>
</tr> <!--2.导航栏部分-->
<tr height="50px" >
<td bgcolor="black">
<a href="#"><font size="3" color="white">首页</font></a>
<a href="#"><font color="white">手机数码</font></a>
<a href="#"><font color="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="0px" cellspacing="0px" bgcolor="white">
<tr height="40px">
<td colspan="2">
<font size="4">会员注册</font> USER REGISTER
</td>
</tr>
<tr>
<td>用户名</td>
<td>
<input type="text" name="user" size="35px" id="user" onfocus="showTips('user','用户名必填！')" onblur="check('user','用户名不能为空!')"/><span id="userspan"></span>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password" name="password" size="35px" id="password" onfocus="showTips('password','密码必填！')" onblur="check('password','密码不能为空!')"/><span id="passwordspan"></span>
</td>
</tr>
<tr>
<td>确认密码</td>
<td>
<input type="password" name="repassword" size="35px" id="repassword"/>
</td>
</tr>
<tr>
<td>E-mail</td>
<td>
<input type="text" name="e-mail" size="35px" id="email"/>
</td>
</tr>
<tr>
<td>姓名</td>
<td>
<input type="text" name="username" size="35px"/>
</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="35px"/>
</td>
</tr>
<tr>
<td>验证码</td>
<td>
<input type="text" name="yzm" />
<img src="../img/yanzhengma.png" />
</td>
</tr>
<tr align="center">
<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="#"><font>关于我们</font></a>
<a href="#"><font>联系我们</font></a>
<a href="#"><font>招贤纳士</font></a>
<a href="#"><font>法律声明</font></a>
<a href="#"><font>友情链接</font></a>
<a href="#"><font>支付方式</font></a>
<a href="#"><font>配送方式</font></a>
<a href="#"><font>服务声明</font></a>
<a href="#"><font>广告声明</font></a>
<p>
Copyright © 2005-2016 hh商城 版权所有
</p>
</td>
</tr>
</table>
</body>
</html>
在浏览器内运行，效果如下：
光标点击到用户名输入框，提示用户名必填！
当用户名未输入内容时提示不能为空！
当填写都正确时则不提示。
