问题描述：
界面：
源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
</style>
<script type="text/javascript">
//验证用户名
function userLostFocus(){
var userName = document.getElementById("username").value;
if(userName == ""){
document.getElementById("nameMsg").innerHTML="<font color='red' size='-1'>用户名不能为空</font>";
}else if(!/^\w{4,16}$/.test(userName)){
document.getElementById("nameMsg").innerHTML="<font color='red' size='-1'>用户名非法</font>";
}
else{
document.getElementById("nameMsg").innerHTML="";
}
}
//验证密码
function psdLostFocus(){
var psd = document.getElementById("psd").value;
if(psd ==""){
document.getElementById("psd").innerHTML="<font color='red' size='-1'>密码不能为空</font>";
}else if(!/^\w{6,12}$/.test(psd)){
document.getElementById("psdMsg").innerHTML = "<font color='red' size='-1'>密码非法</font>";
}else{
document.getElementById("psdMsg").innerHTML="";
}
}
//验证密码是否一致
function checkPsd(){
var psd = document.getElementById("psd").value;
var psd_confirm = document.getElementById("psd_confirm").value;
if(psd == ""){
document.getElementById("psd_confirmMsg").innerHTML="<font color='red' size='-1'>确认密码不能为空</font>";
return false;
}else if(psd!=psd_confirm){
document.getElementById("psd_confirmMsg").innerHTML="<font color='red' size='-1'>密码不一致，请重新输入</font>";
document.getElementById("psd_confirm").value = "";
return false;
}else{
document.getElementById("psd_confirmMsg").innerHTML="";
return true;
}
}
</script>
</head>
<body>
<div>
<img src="img/top.jpg" />
<form action="" method="post" οnsubmit="return checkPsd();">
<table>
<tr>
<td class="words">用户名：</td>
<td>
<input type="text" id="username" name="username" size="20" maxlength="20" οnblur="userLostFocus()"/>
</td>
<td>
<div id="nameMsg">只能输入字母或数字，4-16个字符</div>
</td>
</tr>
<tr>
<td class="words">密码：</td>
<td>
<input type="password" id="psd" name="psd" size="20" maxlength="20" οnblur="psdLostFocus()"/>
</td>
<td>
<div id="psdMsg">密码长度6-12位</div>
</td>
</tr>
<tr>
<td class="words">确认密码：</td>
<td>
<input type="text" id="psd_confirm" name="psd_confirm" size="20" maxlength="20" οnblur="checkPsd()"/>
</td>
<td>
<div id="psd_confirmMsg"></div>
</td>
</tr>
<tr>
<td></td>
<td colspan="2" align="center">
<input type="reset" id="refill" name="refill" value="重填" style="margin-right: 20px;width: 100px;"/>
<input type="submit" id="register" name="caculate" value="注册" style="width: 100px;"/>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
