Javascript停止传递数据的形式

时间:2012-04-30 13:30:43

标签: javascript html forms validation if-statement

解决了我的javascript问题。对不起,这主要是我的错,因为我复制并粘贴了我的代码而不是重写它。奇怪的是,它似乎没有将变量从表单传递到进程页面,因为我已经回复了SQL语句。这个表单以前对java脚本起作用,我添加的所有内容都是Post Code:对于每一行甚至在删除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>

4 个答案:

答案 0 :(得分:1)

功能:checkForm():

如果要:

,您需要更改第二个
else if (username.length<16)) needs to be > 16.

-

功能:checkUsername():

你拼写错误的长度。将其更改为:

else if (username.length>16)

答案 1 :(得分:1)

这个问题的代码太多了,但我注意到第一个函数中的一些内容:

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

答案 2 :(得分:1)

以下拼写错误: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";
            }
        }

答案 3 :(得分:1)

正如其他人所说,检查你的语法。在checkform()中,它应该是

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

并在checkUsername()中拼错了长度。

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

你也可以重构所有这些。你有很多功能几乎可以做同样的事情。如果你创建一个函数,它使用最少的字符,最大字符和控件来验证参数,你可以用20到30行代码完成所有代码。

另外,似乎您在不更改变量名称或目标控件的情况下复制粘贴了一些函数。实际上,您在每个函数中将Username指定为变量,但在条件中更改名称,这意味着您使用了取消分配变量。