求表单验证效果分析，高手帮帮我。

仿了一个，抛砖引玉！L@_@K！ <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 id="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>
 </table>
<script type="text/javascript">
  <!--
// 注：样式表摘抄自 http://style.china.alibaba.com/css/register/ali_register.css
// 部分略作修改
var oAge = document.getElementById("txtAge");
var oNote = document.getElementById("divTipInfo");
var oAlarm = document.getElementById("divAlarmInfo");oAge.onfocus = function()
{
    oNote.className = "notetrue";
}
oAge.onblur = function()
{
    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";
    }
}
  //-->
  </script>
 </body>

解决方案 »

  1.   

    改了下，达到了。
    oAge.onblur = function()
    {
        var numAge = parseInt(this.value);
        if (document.getElementById("txtAge").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{
        oNote.className="note"}
    }
    谢谢你给了我又一种编程思路。
      

  2.   

    哦 还没解决啊 ，就是在文本框里输入信息清空后，释放焦点的时候，右边显示为oNote.className="note"
      

  3.   

    呵呵，说好了是抛砖引玉，LZ 还那么高要求！改了，L@_@K！记得结贴给分，哈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";
        }
    }