<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function focus_username()
{
//获取id=result_username的对象
var resultObj = document.getElementById("result_username");
//写入提示信息
resultObj.innerHTML = "请输入你的用户名";
resultObj.style.color = "gray";
}
function focus_userpwd()
{
//获取id=result_userpwd的对象
var resultObj = document.getElementById("result_userpwd");
//写入提示信息
resultObj.innerHTML = "请输入你的密码";
resultObj.style.color = "gray";
}
function blur_username()
{
//获取id=result_username的对象
var resultObj = document.getElementById("result_username");
//用户名的验证
if(document.form1.username.value=="")
{
resultObj.innerHTML = "<font color='red'>用户名不能为空！</font>";
return false;
}else if(document.form1.username.value.length<5 || document.form1.username.value.length>20)
{
resultObj.innerHTML = "<font color='red'>用户名长度必须介于5-20个字符之间！</font>";
return false;
}else
{
resultObj.innerHTML = "<img src='images/ok.gif' />";
return true;
}
}
function blur_userpwd()
{
//获取id=result_userpwd的对象
var resultObj = document.getElementById("result_userpwd");
//密码的验证
if(document.form1.userpwd.value=="")
{
resultObj.innerHTML = "<font color='red'>密码不能为空！</font>";
return false;
}else if(document.form1.userpwd.value.length<5 || document.form1.userpwd.value.length>20)
{
resultObj.innerHTML = "<font color='red'>密码长度必须介于5-20个字符之间！</font>";
return false;
}else
{
resultObj.innerHTML = "<img src='images/ok.gif' />";
return true;
}
}
function checkForm()
{
var flag_username = blur_username();
var flag_userpwd = blur_userpwd();
if(flag_username==true && flag_userpwd==true)
{
return true;
}else
{
return false;
}
}
</script>
</head>
<body>
<form name="form1" method="post" action="login.php" onsubmit="return checkForm()">
<table width="600" border="1" bordercolor="#ccc" align="center" rules="all" cellpadding="5">
<tr>
<td width="100" align="right">用户名：</td>
<td><input type="text" name="username" onfocus="focus_username()" onblur="blur_username()" /></td>
<td width="300"><div id="result_username"></div></td>
</tr>
<tr>
<td align="right">密码：</td>
<td><input type="password" name="userpwd" onfocus="focus_userpwd()" onblur="blur_userpwd()" /></td>
<td><div id="result_userpwd"></div></td>
</tr>
<tr>
<td> </td>
<td colspan="2">
<input type="submit" value="提交表单" />
<input type="reset" value="重新填写" />
</td>
</tr>
</table>
</form>
</body>
</html>