表单验证不起作用

Question

我有一个简单的登录，我无法验证工作。我想知道是否有人可以帮忙。

HTML：

<div class="login"> 
     <h2>Sign In</h2> 

     <form id="frmLogin" method="post"> 

      Username: <input id="txtUsername" name="txtUsername" type="text" /><br/> 
      Password: <input name="txtPassword" type="password" /> <br/> 
      <button onClick="validateLogin()">Log In</button> 
     </form> 
    </div><!-- End of Login Section --> 

的Javascript：

<script> 
function validateLogin() 
{ 
    var userName = document.getElementsByID('txtUsername').value; 

    var invalidForm = 0; 

    if(userName == "") 
    { 
     alert("Username cannot be blank!"); 
     invalidForm = 1;     
    }//end if 

    if(invalidForm == 0) 
    { 
     alert("Form validated, no errors"); 
    }//end if 

} 
</script> 

目前我只测试一个空的用户名，一旦我能得到这个工作，我会继续上休息。 谢谢！

Answer 1

做你的jQuery代码的类似： -

<script> 
function validateLogin() 
{ 
    var userName = document.getElementById('txtUsername').value; 

    var invalidForm = 0; 
    var errMessage = "" 

    if(userName === "") 
    { 
     errMessage = "Username cannot be blank!"; 
     invalidForm = 1;     
    }//end if 

    if(invalidForm == 0) 
    { 
     alert("Form validated, no errors"); 
    } 
    else if (invalidForm == 1) 
    { 
     alert(errMessage); 
     return false; 
    } 
} 
</script> 

它可以帮助你。

Answer 2

要获得和通过ID元素函数名称是getElementById而不是getElementsByID，此外，JavaScript区分大小写，因此getElementByID不起作用。

function validateLogin() 
{ 
    var userName = document.getElementById('txtUsername').value; 

    var invalidForm = 0; 

    if(userName == "") 
    { 
     alert("Username cannot be blank!"); 
     invalidForm = 1;     
    }//end if 

    if(invalidForm == 0) 
    { 
     alert("Form validated, no errors"); 
    }//end if 

}