如何使我的网页表单的验证与雅虎注册页面一样？

Question

我能够显示一个警告信息，当我的表单域是空的，但我想在空字段前面显示一个红色的味精，就像在雅虎注册形式我不知道如何做到这一点可以任何人解释了解它

function validate_form () 
{ 
    valid = true; 


     if (document.form.login.value == "") 
     { 
      valid = false; 
      document.getElementById("LoginError").visible=false; 

     } 
     else 
     { 
      document.getElementById("LoginError").visible=false; 
     } 
     if(document.form.password.value == "") 
     { 
      valid = false; 
      document.getElementById("PasswordError").visible=false; 

     } 
     else 
     { 
      document.getElementById("PasswordError").visible=false; 
     } 

     return valid; 
} 

//--> 

</script> 

<form name="form" method="post" action="UserLogin" onSubmit="return validate_form();"> 
      <table width="592" height="127" border="0"> 
      <tr> 
       <td width="46" height="29">&nbsp;</td> 
       <td colspan="3"><%! private Boolean bRecord = false; 
      private Boolean bLogin = false; 
     %> 
       <% if(request.getAttribute("signup") != null) 
      bRecord =(Boolean)request.getAttribute("signup"); 
     else 
      bRecord = false; 

     if(request.getAttribute("invalidlogin") != null) 
      bLogin =(Boolean)request.getAttribute("invalidlogin"); 
     else 
      bLogin = false; 

     if(bRecord == true) 
     {%> 
       <font color="#336600"><b>You are Successfully Signed Up</b></font> 
       <% 
     request.removeAttribute("signup"); 
     }//end if 
     if(bLogin == true) 
     {%> 
       <font color="#FF0000"><b>Invalid Login or Password</b></font> 
       <% 
     request.removeAttribute("invalidlogin"); 
     }//end if 

     %></td> 
      </tr> 
      <tr> 
       <td>&nbsp;</td> 
       <td width="135"><div class="style1">LOGIN: </div></td> 
       <td width="146"><input type="text" name="login"></td> 
       <td width="247">*<span id="LoginError" visible="false" style="color: Red;">Enter login</span> 

</td> 
      </tr> 
      <tr> 
       <td>&nbsp;</td> 
       <td><div class="style1">PASSWORD: </div></td> 
       <td><input name="password" type="password" id="password"></td> 
       <td>*<span id="PasswordError" visible="false" style="color: Red;">enter Password</span></td> 
      </tr> 
      <tr> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
       <td align="right"><input name="Submit" type="image" class="bgtop" value="SIGN IN" src="images/btn_s.JPG" border="0" > 
       </td> 
       <td>&nbsp;</td> 
      </tr> 
      </table> 
     </form> 

问候

Answer 1

你可以简单地在现场

<span id="spanUsernameRequired" style="visibility: hidden; color: Red;"> 
    This information is required</span> 
<input id="username" type="text" /> 
<a href="#" onclick="return validate_form();">Submit</a> 

前加上一个不可见的范围，然后使其可见时，该字段为空

function validate_form() 
{  
    if (document.getElementById("username").value == "") 
    { 
     document.getElementById("spanUsernameRequired").style.visibility = 'visible'; 
     return false; 
    }  
    else 
     document.getElementById("spanUsernameRequired").style.visibility = 'hidden'; 

    return true; 
}