如何使我的網頁表單的驗證與雅虎註冊頁面一樣？

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; 
}