仿阿里巴巴表单验证的一些有关问题，高手帮小弟我解决下

仿阿里巴巴表单验证的一些问题，高手帮我解决下。
阿里巴巴注册页面：http://china.alibaba.com/member/join.htm?tracelog=Reg_TradeToolbar_Index

仿代码
<html> <body>
<head>
<title> Check Age </title>
<style type= "text/css ">
.name div.text{
float:left;
width:118px;
font-size:12px;
text-align:right;
font-weight:bold;
}
.name div.redstar {
float:right;
width:10px;
font-size:12px;
text-align:right;
font-weight:normal;
color:#ff0000;
margin-right:3px;
}
div.input{
width:257px;
text-align:left;
float:left;
font-size:12px;
}
div.note{
width:310px;
float:right;
text-align:left;
font-size:12px;
color:#999999;
padding:3px;
line-height:130%;
background:#ffffff;
border:#ffffff 1px solid;
}
div.notetrue{
width:310px;
float:right;
text-align:left;
font-size:12px;
padding:3px;
line-height:130%;
color:#485E00;
background:#F7FFDD;
border:#485E00 1px solid;
}
div.noteawoke{
display: none;
width:310px;
float:right;
text-align:left;
font-size:12px;
color:#ff0000;
padding:3px;
line-height:130%;
background:#fff5d8;
border:#ff7300 1px solid;
background-repeat:no-repeat;
background-position:2 3px;
margin:0px;
}
</style>

</head>
<body>
<table>
<tr>
<td class= "name "> <div class= "text "> 年龄 </div> <div class= "redstar "> * </div> </td>
<td> <div class= "input "> <input type= "text " id= "txtAge " /> <div> </td>
<td> <div class= "note " id= "divTipInfo "> 请输入 3-200 之间的数字！ </div> <div class= "noteawoke " id= "divAlarmInfo "> 请输入正确的数字 </div> </td>
</tr>

<tr>
<td class= "name "> <div class= "text "> 用户名 </div> <div class= "redstar "> * </div> </td>
<td> <div class= "input "> <input type= "text " id= "passName " /> <div> </td>
<td> <div class= "note " id= "divshowmsg "> 4-20 个字符(仅限大小写字母,数字,下划线等) </div> <div class= "noteawoke " id= "diverrmsg "> 请输入正确的用户名 </div> </td>

</tr>
</table>

<script type= "text/javascript ">
<!--
//检查年龄
var oAge = document.getElementById( "txtAge ");
var oNote = document.getElementById( "divTipInfo ");
var oAlarm = document.getElementById( "divAlarmInfo ");

oAge.onfocus = function()
{
oNote.className = "notetrue ";
}
oAge.onblur = function()
{
if (this.value != " ")
{
var numAge = parseInt(this.value);
if (isNaN(numAge) || !(numAge> =3 && numAge <=200))
{
oAlarm.style.display = "block ";
oNote.style.display = "none ";
}
else
{
this.value = numAge;
oAlarm.style.display = "none ";

oNote.className = "note ";
oNote.style.display = "block ";
}
}
else
{
oAlarm.style.display = "none ";

oNote.className = "note ";
oNote.style.display = "block ";
}
}

//检查用户名
var opassName = document.getElementById( "passName ");
var odivshowmsg = document.getElementById( "divshowmsg ");
var odiverrmsg = document.getElementById( "diverrmsg ");

opassName.onfocus = function()
{
odivshowmsg.className = "notetrue ";
}
opassName.onblur = function()
{
if (this.value != " ")
{
odiverrmsg.style.display = "block ";
odivshowmsg.style.display = "none ";
}else{
odiverrmsg.style.display = "none ";

odivshowmsg.className = "note ";

odivshowmsg.style.display = "block ";
}
}
//-->
</script>
</body>
</html>

问题一：这段代码还有两个没有仿造出来，分别是当输入正确释放焦点的时候，
输入框左面有“对勾”显示，右边显示为“填写正确”这两点请帮我解决下。
所加的代码最好用 "// "注释下。

问题二：上面的代码的错误、正确提示信息都写在HTML里，能不能建个数组放到JS代码了？让代码看起来更加紧凑、整洁、简单。请高手帮我实现下。

请高手分别解决。

[解决办法]
看不到原网站的，只根据理解改了下，你看看吧
<html>
<head>
<title> Check Age </title>
<meta http-equiv= "content-type " content= "text/html; charset=gb2312 ">
<style type= "text/css ">
.name div.text{
float:left;
width:118px;
font-size:12px;
text-align:right;
font-weight:bold;
}
.name div.redstar {
float:right;
width:10px;
font-size:12px;
text-align:right;
font-weight:normal;
color:#ff0000;
margin-right:3px;
}
div.input{
width:257px;
text-align:left;
float:left;
font-size:12px;
}
div.note{
width:310px;
float:right;
text-align:left;
font-size:12px;
color:#999999;
padding:3px;
line-height:130%;
background:#ffffff;
border:#ffffff 1px solid;
}
div.notetrue{
width:310px;
float:right;
text-align:left;
font-size:12px;
padding:3px;
line-height:130%;
color:#485E00;
background:#F7FFDD;
border:#485E00 1px solid;
}
div.noteawoke{
display: none;
width:310px;
float:right;
text-align:left;
font-size:12px;
color:#ff0000;
padding:3px;
line-height:130%;
background:#fff5d8;
border:#ff7300 1px solid;
background-repeat:no-repeat;
background-position:2 3px;
margin:0px;
}
div.noteright{
display: none;
width:310px;
float:right;
text-align:left;
font-size:12px;
color:#485E00;
padding:3px;
line-height:130%;
background:#00ff00;
border:#ff7300 1px solid;
background-repeat:no-repeat;
background-position:2 3px;
margin:0px;
}
</style>

</head>
<body>
<table>
<tr>
<td class= "name "> <div class= "text "> <font color= "blue " id=txtAgeFlag style= "display:none; "> √ </font> 年龄 </div> <div class= "redstar "> * </div> </td>
<td> <div class= "input "> <input type= "text " id= "txtAge " /> <div> </td>
<td> <div class= "note " id= "divTipInfo "> </div> <div class= "noteawoke " id= "divAlarmInfo "> </div> <div class= "noteright " id= "divRightInfo "> </div> </td>
</tr>

<tr>
<td class= "name "> <div class= "text "> <font color= "blue " id=passNameFlag style= "display:none; "> √ </font> 用户名 </div> <div class= "redstar "> * </div> </td>
<td> <div class= "input "> <input type= "text " id= "passName " /> <div> </td>
<td> <div class= "note " id= "divshowmsg "> </div> <div class= "noteawoke " id= "diverrmsg "> </div> <div class= "noteright " id= "divcorrmsg "> </div> </td>

</tr>
</table>

<script type= "text/javascript ">
var promptArray = new Array();
promptArray[0] = new Array( "请输入 3-200 之间的数字！ ", "请输入正确的数字 ", "填写正确 ");//年龄提示信息
promptArray[1] = new Array( "4-20 个字符(仅限大小写字母,数字,下划线等) ", "请输入正确的用户名 ", "填写正确 ");//用户名提示信息

</script>

</body>
</html>

仿阿里巴巴表单验证的一些有关问题高

热点推荐