js关于表单校验完善
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<style type="text/css">
.left{
width: 100px;
text-align: right;
}
.right{
width: 800px;
}
.input{
width: 400px;
height: 30px;
}
</style>
<script>
// 获得焦点时 定义两个形参 info是指为span标签添加的内容
function showTips(id,info){
// 找到id+"span"标签 在其内加入<font color='red'>info</font>
document.getElementById(id+"span").innerHTML="<font color='red'>"+info+"</font>";
}
// 失去焦点时
function check(id,info){
// 定义一个变量 获得id标签内的内容
var content=document.getElementById(id).value;
if(content==""){
// 如果获得的内容为空 为后边span标签添加info 提示用户
document.getElementById(id+"span").innerHTML="<font color='red'>"+info+"</font>";
}else{
// 如果不为空 就把空字符串给span添加 显示不出来
document.getElementById(id+"span").innerHTML="";
}
}
</script>
</head>
<body>
<!--确定事件并绑定函数-->
<form action="#" method="post" name="longFrom" onsubmit="checkFrom()">
<table border="0" align="center" cellpadding="0" cellspacing="50">
<tr>
<td class="left">用户名</td>
<td class="right">
<input type="text" class="input" id="user" onfocus="showTips('user','用户名必填')" onblur="check('user','用户名不能为空')"/><span id="userspan"></span>
</td>
</tr>
<tr>
<td class="left">密码</td>
<td class="right">
<input type="password" class="input" id="pas" onfocus="showTips('pas','用户名必填')" onblur="check('pas','用户名不能为空')"/><span id="passpan"></span>
</td>
</tr>
<tr>
<td class="left">确认密码</td>
<td class="right">
<input type="password" class="input" id="repas" onfocus="showTips('repas','用户名必填')" onblur="check('repas','用户名不能为空')"/><span id="repasspan"></span>
</td>
</tr>
<tr>
<td class="left"></td>
<td class="right">
<input type="submit" value="提交" style="padding: 10px;"/>
</td>
</tr>
</table>
</form>
</body>
</html>
