javascript - 表单验证不起作用

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

要通过 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 

}