javascript - Javascript阻止表单传递数据

Question

解决了我的javascript问题。抱歉，这主要是我的错，因为我复制并粘贴了我的代码，而不是再次重写它。奇怪的是，它似乎没有将变量从表单传递到流程页面，因为我已经回显了 SQL 语句。这个表单在java脚本之前确实有效，我添加的只是邮政编码：对于每一行，即使在删除javascript之后它仍然不起作用：S对不起明天的截止日期，我很恐慌。

 <script type="text/javascript">
            function checkForm()
            {
                var username = document.getElementById('username').value;
                if(username.length < 5)
                {
                    alert("Username is to short");
                    return false;
                }
                else if (username.length<16)
                {
                    alert("Username is to long");
                    return false;
                }

                var firstName = document.getElementById('firstName').value;
                if(firstName.length <3)
                {
                    alert("Forname is to short");
                    return false;
                }

                var lastName = document.getElementById('lastName').value;
                if (lastName.length <3)
                {
                    alert("Surname is to short");
                    return false;
                }

                var address = document.getElementById('address').value;
                if (address.length <8)
                {
                    alert("Address is to short");
                    return false;
                }

                var town = document.getElementById('town').value;
                if (town.length <3)
                {
                    alert ("Town is to short");
                    return false;
                }

                var postCode = document.getElementById('postCode').value;
                if (postCode.length <6)
                {
                    alert ("Invalid Post Code");
                    return false;
                }
                else if (postCode.length>8)
                {
                    alert("Invalid Post Code");
                    return false;
                }


                var cardType = document.getElementById('cardType').value;
                if (cardType.length <3)
                {
                    alert ("Please enter a valid card type");
                    return false;
                }

                var password = document.getElementById('password').value;
                if (password.length <6)
                {
                    alert ("You password must be between 6-12 characters");
                    return false;
                }
                else if(password.length>12)
                {
                    alert ("Your password must be between 6-12 characters");
                    return false;
                }
                else
                {
                    return true;
                }


            }

            function checkUsername()
            {
                var username = document.getElementById('username').value;
                var element = document.getElementById('username1');
                if(username.length < 5)
                {
                    element.innerHTML = "Username is to short";
                    element.style.color = "red";
                }
                else if (username.length >16)
                {
                    element.innerHTML = "Username is to long";
                    element.style.color = "red";
                }
                else
                {
                    element.innerHTML = "Username";
                    element.style.color = "green";
                }
            }
            function checkFname()
            {
                var firstName = document.getElementById('firstName').value;
                var element = document.getElementById('firstname1');
                if(firstName.length < 3)
                {
                    element.innerHTML = "Forname is to short";
                    element.style.color = "red";
                }
                else
                {
                    element.innerHTML = "Forname";
                    element.style.color = "green";
                }
            }
            function checkLname()
            {
                var lastName = document.getElementById('lastName').value;
                var element = document.getElementById('surname1');
                if(lastName.length < 3)
                {
                    element.innerHTML = "Surname is to short";
                    element.style.color = "red";
                }
                else
                {
                    element.innerHTML = "Surname";
                    element.style.color = "green";
                }
            }
            function checkAddress()
            {
                var address = document.getElementById('address').value;
                var element = document.getElementById('address1');
                if(address.length < 8)
                {
                    element.innerHTML = "Address is to short";
                    element.style.color = "red";
                }
                else
                {
                    element.innerHTML = "Address";
                    element.style.color = "green";
                }
            }
            function checkTown()
            {
                var town = document.getElementById('town').value;
                var element = document.getElementById('town1');
                if(town.length < 3)
                {
                    element.innerHTML = "Town is to short";
                    element.style.color = "red";
                }
                else
                {
                    element.innerHTML = "Town";
                    element.style.color = "green";
                }
            }
            function checkPostCode()
            {
                var postCode = document.getElementById('postCode').value;
                var element = document.getElementById('postcode1');
                if(postCode.length < 6)
                {
                    element.innerHTML = "Post code is to short";
                    element.style.color = "red";
                }
                else if (postCode.length>8)
                {
                    element.innerHTML = "Post Code To Long";
                    element.style.color = "red";
                }
                else
                {
                    element.innerHTML = "Post Code";
                    element.style.color = "green";
                }
            }

                function checkCard()
                {
                    var cardType = document.getElementById('cardType').value;
                    var element = document.getElementById('card1');
                    if(cardType.length < 3)
                    {
                        element.innerHTML = "Card is to short";
                        element.style.color = "red";
                    }
                    else
                    {
                    element.innerHTML = "Card Type";
                    element.style.color = "green";
                    }
                }
                function checkPassword()
            {
                var password = document.getElementById('password').value;
                var element = document.getElementById('password1');
                if(password.length < 6)
                {
                    element.innerHTML = "Password is to short";
                    element.style.color = "red";
                }
                else if (password.length>16)
                {
                    element.innerHTML = "Password is to long";
                    element.style.color = "red";
                }
                else
                {
                    element.innerHTML = "Password";
                    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" >

    <table> 
    <tr><td><label id="username1">Username:</label></td><td><input id="username" type="text" size="16" onBlur='checkUsername();'/></td></tr>
    <tr><td><label id="firstname1">Forename:</label></td><td><input id="firstName" type="text" size="20" onBlur="checkFname();" /></td></tr>
    <tr><td><label id="surname1">Surname:</label></td><td><input id="lastName" type="text" size="30" onBlur="checkLname();" /></td></tr>
    <tr><td><label id="address1">Address:</label></td><td><input id="address" type="text" size="50" onBlur="checkAddress();" /></td></tr>
    <tr><td></td><td><input id="address2" type="text" size="50" onBlur="" /></td></tr>
    <tr><td><label id="town1">Town:</label></td><td><input id="town" type="text" size="50" onBlur="checkTown();" /></td></tr>
    <tr><td><label id="postcode1">Post Code:</label></td><td> <input type="text" id="postCode" size="8" onBlur="checkPostCode();" /></td></tr>
    <tr><td><label id="contact1">Contact No:</label></td><td> <input type="number" id="contact" size="12" onBlur="checkContactNo();" /></td></tr>
    <tr><td>Card Number:</td><td><input type="number" id="cardNo1" size="4" /> - <input type="number" id="cardNo2" size="4" /> - <input type="number" id="cardNo3" size="4" /> - <input type="number" id="cardNo4" size="4" /></td></tr>
    <tr><td><label id="card1">Card Type</label></td><td> <input type="text" id="cardType" size="8" onBlur="checkCard();" /></td></tr>
    <tr><td>Email Address:</td><td><input id="emailAddress" type="text" size="50" /></td></tr>
    <tr><td><label id="password1">Password:</label></td><td><input id="password" type="password" size="16" onBlur="checkPassword();" /></td></tr>
    <tr><td><label id="terms1">Accept Terms & Conditions:</label></td><td><input type="checkbox" id="termsConditions" value="yes" onBlur="checkTerms();" /></td></tr>
    <tr><td><input type="reset" id="resetForm" value="Reset" id="resetForm" /></td><td><input type="submit" id="submitUser" value="Submit" id="submitUser" onSubmit='return checkForm();' /></td></tr>
    </table>
</form>

score 1 · Accepted Answer

函数：checkForm()：

如果要：您需要更改第二个 else：

else if (username.length<16)) needs to be > 16.

--

函数：检查用户名（）：

您拼写错误的长度。将其更改为：

else if (username.length>16)

score 1 · Accepted Answer

这对于一个问题来说代码太多了，但我注意到第一个函数中的一些事情：

else if (username.length<16) // This should probably be username.length > 16
{
    alert("Username is to long");
    return false;
}

if (isNAN(contact)) // this should probably be !isNaN(contact)
{
    return true;
}

score 1 · Accepted Answer

您在以下内容中拼错了长度：username.lenght>16

这就是你的时间太长不起作用的原因。

        function checkUsername()
        {
            var username = document.getElementById('username').value;
            var element = document.getElementById('username1');
            if(username.length < 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.style.color = "green";
            }
        }

score 1 · Accepted Answer

正如其他人所说，请检查您的语法。中checkform()，应该是

else if (username.length > 16)) instead of < 16

在checkUsername()你拼写长度错误。

但你的主要问题在于你的回报。在checkform()您应该只return true在所有内容都经过验证后才将其放在最后，否则该函数将在第一次验证后退出。

你也可以重构所有这些。你有很多功能可以做几乎相同的事情。如果您创建一个函数，该函数采用最小字符、最大字符和控件来验证参数，您可以在 20 到 30 行中完成所有代码。

另外，您似乎复制粘贴了一些函数而没有更改变量或目标控件的名称。实际上，您Username在每个函数中都将其分配为变量，但在条件中更改名称，这意味着您使用了取消分配变量。

javascript - Javascript阻止表单传递数据

4 回答 4

Related

Reference