Question

我制作了一个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>

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>
<input type="submit" value="Register" name="submit" />

Answer 1

您的代码存在很多问题。您定义了一些变量：

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

这些应该没有.value，因为稍后你试图设置他们的innerHTML。在你的代码中，你试图用错误的变量来填充它们。此外，您还没有定义EmailError。猜测它应该与添加元素和定义变量所需的其他元素相同。所以它应该是这样的：

JS：

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;
    }

}

和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>

PHP JavaScript客户端验证未发生

1 个答案: