JavaScript判断是没有取得应有的结果

为什么用户名为空的时候div内容没有变更呢?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>云南大学自习室系统</title>
<script type="text/javascript">
<!--
function validity(){
var userinfo=document.getElementById("uerr"); 
var passinfo=document.getElementById("perr"); 
if(loginform.username.value == "") {
userinfo.innerHTML = "用户名错误" ;
}
if (loginform.password.value == "") {
passinfo.innerHTML = "密码错误";
}
}
-->
</script>
</head>
<body>
<form id="loginform" name="loginform" method="post" action="">
    <table width="354" height="176" border="0">
      <tr>
        <td colspan="2">云南大学自习室系统</td>
      </tr>
      <tr>
        <td width="">用户名</td>
        <td>   
          <input type="text" name="username" id="username"/>        </td>
      </tr>
       <tr><td colspan="2"><div id="uerr"></div></td></tr>
      <tr>
        <td>密码</td>
        <td>
           <input type="password" name="password" id="password"/>        </td>
      </tr>
       <tr><td colspan="2"><div id="perr"></div></td></tr>
      <tr>
        <td><input type="submit" name="Submit" value="登录" onClick="validity();"></td>
        <td>&nbsp;</td>
      </tr>
    </table>
</form>
</body>
</html>

解决方案 »

  1.   


    if(document.getElementById('username').value == '')
        ...
      

  2.   

    首先loginform没有定义，var loginform = document.getElementById("loginform")；
    其次登陆按钮类型是submit，也就是说点击登陆按钮一定会刷新画面。就算是检查出错误也会被刷新。所以将submit改为button<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>云南大学自习室系统</title> 
    <script type="text/javascript"> 
        <!-- 
        function validity(){ 
            var userinfo=document.getElementById("uerr");  
            var passinfo=document.getElementById("perr");
            var loginform = document.getElementById("loginform")；
            var check = true;
            if(loginform.username.value == "") { 
                userinfo.innerHTML = "用户名错误" ; 
                check = false;
            } 
            if (loginform.password.value == "") { 
                passinfo.innerHTML = "密码错误"; 
                check = false;
            }
            if (check) loginform.submit();
        } 
        -->
    </script> 
    </head> <body> 
    <form id="loginform" name="loginform" method="post" action=""> 
        <table width="354" height="176" border="0"> 
          <tr>
            <td colspan="2">云南大学自习室系统</td> 
          </tr><tr> 
            <td width="">用户名
            </td><td>
              <input type="text" name="username" id="username"/>
            </td>
          </tr><tr>
           <td colspan="2"><div id="uerr"></div></td>
          </tr><tr> 
            <td>密码</td> 
            <td><input type="password" name="password" id="password"/></td>
          </tr><tr>
           <td colspan="2"><div id="perr"></div></td>
          </tr><tr>
            <td><input type="button" name="Submit" value="登录" onClick="validity();"></td>
            <td>&nbsp;</td>
          </tr>
        </table>
    </form> 
    </body> 
    </html>
      

  3.   

    首先loginform没有定义，var loginform = document.getElementById("loginform")；
    其次登陆按钮类型是submit，也就是说点击登陆按钮一定会刷新画面。就算是检查出错误也会被刷新。所以将submit改为button首先你这样理解的只是对了一半，并不是submit就一定会刷新界面，他其实内部 只是默认调了$("form").submit() 
    <input type="button" name="Submit" value="登录" onClick="return validity();">
    把你调用涵数的改成前面加上return ,那么 你涵数里面只要返回false 就可以阻止表单提交了，就算是type="submit" 一样不会提交
      

  4.   

    1、提交按钮事件这样写 onClick=" return validity();"
    2、判断{} 中增加 return false;
    3、loginform 没必要定义;
    代码在下面：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>云南大学自习室系统</title>
     <script type="text/javascript"> 
        <!--
        function validity(){ 
            var userinfo=document.getElementById("uerr");  
            var passinfo=document.getElementById("perr");
         
            if(loginform.username.value == "") { 

                userinfo.innerHTML = "用户名错误" ; 
                return false;                    
                //增加return false;
            } 
            if (loginform.password.value == "") { 
                passinfo.innerHTML = "密码错误"; 
                return false;
                //增加return false;
            }    } 
     -->
    </script> 
    </head>
     <body>
      <form id="loginform" name="loginform" method="post" action=""> 
        <table width="354" height="176" border="0"> 
          <tr>
            <td colspan="2">云南大学自习室系统</td> 
          </tr><tr> 
            <td width="">用户名
            </td><td>
              <input type="text" name="username" id="username"/>
            </td>
          </tr><tr>
              <td colspan="2"><div id="uerr"></div></td>
          </tr><tr> 
            <td>密码</td> 
            <td><input type="password" name="password" id="password"/></td>
          </tr><tr>
              <td colspan="2"><div id="perr"></div></td>
          </tr><tr>
            <td><input type="submit" name="Submit" value="登录" onClick=" return validity();"></td>
            <td>&nbsp;</td>
          </tr>
        </table>
    </form> 
     </body>
    </html>
      

  5.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>云南大学自习室系统</title>
     <script type="text/javascript"> 
        <!--
        function validity(){ 
            var userinfo=document.getElementById("uerr");  
            var passinfo=document.getElementById("perr");
         
            if(document.getElementById('username').value == '') { 

                userinfo.innerHTML = "用户名错误" ; 
                return false;                    
                //增加return false;
            } 
            if (document.getElementById('password').value == '') { 
                passinfo.innerHTML = "密码错误"; 
                return false;
                //增加return false;
            }    } 
     -->
    </script> 
    </head>
     <body>
      <form id="loginform" name="loginform" method="post" action=""> 
        <table width="354" height="176" border="0"> 
          <tr>
            <td colspan="2">云南大学自习室系统</td> 
          </tr><tr> 
            <td width="">用户名
            </td><td>
              <input type="text" name="username" id="username"/>
            </td>
          </tr><tr>
              <td colspan="2"><div id="uerr"></div></td>
          </tr><tr> 
            <td>密码</td> 
            <td><input type="password" name="password" id="password"/></td>
          </tr><tr>
              <td colspan="2"><div id="perr"></div></td>
          </tr><tr>
            <td><input type="submit" name="Submit" value="登录" onClick=" return validity();"></td>
            <td> </td>
          </tr>
        </table>
    </form> 
     </body>
    </html>