未发生PHP JavaScript客户端验证

我制作了一个XHTML1.1表单，通过PHP服务器可以很好地进行验证。但是，当表单在JavaScript检查错误之前提交到服务器时，JavaScript验证不起作用。JavaScript代码

JavaScript

<script type="text/javascript"> 

        function checkall()
        {


                var Username = document.getElementById('Username').value;
                var Password = document.getElementById('Password').value;
                var Password2 = document.getElementById('Password2').value;


                var UsernameMessage = document.getElementById('UsernameMessage').value;
                var PasswordMessage = document.getElementById('PasswordMessage').value;
                var PasswordMessage2 = document.getElementById('PasswordMessage2').value;



            if (Username == "") 
        {
            UsernameMessage.innerHTML = "Choose your username";
            return false;
        }   else UsernameMessage.innerHTML = "";


            if (Password == "") 
        {
            PasswordError.innerHTML = "Enter a password";
            return false;
        }   else EmailError.innerHTML = "";


            if (Password2 == "") 
        {
            PasswordError2.innerHTML = "Confirm your password";
            return false;
        }   else EmailError.innerHTML = "";

            if (Password2 == Password) 
        {   
            EmailError.innerHTML = "";
        }   else PasswordError2.innerHTML = "Confirm your password";
            return false;

        }
            </script>

函数checkall（）
{
var Username=document.getElementById（'Username'）。值；
var Password=document.getElementById（'Password'）。值；
var Password2=document.getElementById（'Password2'）.value；
var UsernameMessage=document.getElementById（'UsernameMessage'）.value；
var PasswordMessage=document.getElementById（'PasswordMessage'）。值；
var PasswordMessage2=document.getElementById（'PasswordMessage2'）。值；
如果（用户名==“”）
{
UsernameMessage.innerHTML=“选择您的用户名”；
返回false；
}else UsernameMessage.innerHTML=“”；
如果（密码==“”）
{
PasswordError.innerHTML=“输入密码”；
返回false；
}else EmailError.innerHTML=“”；
如果（密码2==“”）
{
PasswordError2.innerHTML=“确认您的密码”；
返回false；
}else EmailError.innerHTML=“”；
if（Password2==密码）
{   
EmailError.innerHTML=“”；
}else PasswordError2.innerHTML=“确认密码”；
返回false；
}

HTML:

用户名：
密码：
确认密码：

您的代码有很多错误。 您定义了几个变量：

var UsernameMessage = document.getElementById('UsernameMessage').value;
var PasswordMessage = document.getElementById('PasswordMessage').value;
var PasswordMessage2 = document.getElementById('PasswordMessage2').value;

它们应该没有

.value

，因为稍后您将尝试设置它们的

innerHTML

。 在代码中，您试图用错误的变量填充这些变量。 此外，还有未定义的

EmailError

。猜测它应该与添加元素和定义变量所需的其他元素相同。 所以所有的一切都应该是这样的：

JS:

和HTML：

<form action="sign_up.php" method="post" onsubmit='return checkall()'>Username:
    <input type="text" name="Username" id="Username" />
    <label id='UsernameMessage'></label>Password:
    <input type="text" name="Password" id="Password" />
    <label id='PasswordMessage'></label>Confirm Password:
    <input type="text" name="Password2" id="Password2" />
    <label id='PasswordMessage2'></label>
    <!-- extra HTML element for your emailerror -->
    <div id="EmailError"></div>
    <input type="submit" value="Register" name="submit" />
</form>

用户名：
密码：
确认密码：

你5分钟前问的同一个问题有什么问题

PasswordError

、

PasswordError2

和

EmailError

都是未定义的变量。我不知道如何设置问题的格式，因此整个问题没有显示出来。对不起，我在你的答案中加入了我的内容，使之更加完整。你真是个天才！非常感谢你。如何一次显示所有错误消息；现在，它们像在JS中一样连续显示。您可以将它们全部添加到数组或字符串中，删除每次检查中的

return false

，如果有错误消息，则在整个函数结束时进行检查。如果你这样做，就返回false。我已经听从了你的建议；我显示所有错误，然后进行测试以返回假值。非常感谢

function checkall() {

    var Username = document.getElementById('Username').value;
    var Password = document.getElementById('Password').value;
    var Password2 = document.getElementById('Password2').value;

    var UsernameMessage = document.getElementById('UsernameMessage');
    var PasswordMessage = document.getElementById('PasswordMessage');
    var PasswordMessage2 = document.getElementById('PasswordMessage2');
    var EmailError = document.getElementById('EmailError');

    if (Username == "") {
        UsernameMessage.innerHTML = "Choose your username";
        return false;
    } else UsernameMessage.innerHTML = "";

    if (Password == "") {
        PasswordMessage.innerHTML = "Enter a password";
        return false;
    } else EmailError.innerHTML = "";

    if (Password2 == "") {
        PasswordMessage2.innerHTML = "Confirm your password";
        return false;
    } else EmailError.innerHTML = "";

    if (Password2 == Password) {
        EmailError.innerHTML = "";
    } else {
       // The return must occur inside {}
       // Otherwise, the function will *always* return false.
        PasswordMessage2.innerHTML = "Confirm your password";
        return false;
    }

}

<form action="sign_up.php" method="post" onsubmit='return checkall()'>Username:
    <input type="text" name="Username" id="Username" />
    <label id='UsernameMessage'></label>Password:
    <input type="text" name="Password" id="Password" />
    <label id='PasswordMessage'></label>Confirm Password:
    <input type="text" name="Password2" id="Password2" />
    <label id='PasswordMessage2'></label>
    <!-- extra HTML element for your emailerror -->
    <div id="EmailError"></div>
    <input type="submit" value="Register" name="submit" />
</form>