Javascript 表单(进行了建议的更改但不起作用)


Javascript Form (Made recomended changes yet not working)

嗨,阅读了上一篇文章中建议进行的更改,但我看不到JS工作并且我没有错误,有人可以告诉我哪里出了问题吗? 谢谢
此示例场景在用户输入的字符不足或字符过多时更改文本的颜色 我也想知道是否可以将文本框的颜色也更改为红色。

<script type="text/javascript">
                function checkForm()
                {
                    var username = document.getElementsById('username').value;
                    if(username.length<5)
                    {
                        alert("Username is to short");
                        return false;
                    }
                    else if (username.lenght<16)
                    {
                        alert("Username is to long");
                        return false;
                    }
                    else
                    {
                    return true;    
                    }
                }
                function checkUsername()
                {
                    var username = document.getElementsById('username').value;
                    var element = document.getElementsById('username1');
                    if(username.lenght<5)
                    {
                        element.innerHTML = "Username is to short";
                        element.style.color = "red";
                    }
                    else if (username.lenght>16)
                    {
                        element.innerHTML = "Username is to long";
                        element.style.color = "red";
                    }
                    else
                    {
                        element.innerHTML = "Valid Username";
                        element.style.color = "green";
                    }
                }
    </script>
        <p><b><h3>Welcome User Please Register</h3></b></p>
        <form action="registerUserProcess.php" id="registerUserForm" method="post" name="registerUserForm" onSubmit='return checkForm();'>
    <table> 
    <tr><td><label id="username1">Username</label></td><td><input id="username" type="text" size="16" onBlur='checkUsername();'/></td></tr>

问题出在您的标签上。当你调用 document.getElementById('username') 时,js 会在文档中搜索id == username,它会找到一个标签,而不是一个文本字段。将标签 ID 切换为 sth label_username,并将id='username'添加到输入定义中。