Javascript表单验证不工作,所有的数据被张贴到php


javascript form validation not works, and all data are posted to php

这是html的一部分。我把它写在一个不同的文件和javascript到一个不同的。js文件,我已经包含在html适当的地方。所有信息通过php和mysql进入数据库,php文件名是registration。php

<form action="registration.php" method="post" onsubmit="return validate();" name="myForm">
    <table>
        <tr>
            <td ><label><strong>First Name</strong></label></td>
            <td>
            <input name="fname" type="text" id="fname" onfocus="hideerror()" ></td>
            <td style="width: 240px">&nbsp;</td>
        </tr>
        <tr>
            <td ><label><strong>Last Name</strong></label></td>
            <td>
            <input name="lname" type="text" style="width: 177px" id="lname" onfocus="hideerror()"></td>
            <td></td>
        </tr>
        <tr>
            <td ><label><strong>Email</strong></label></td>
            <td>
            <input name="email" type="text" id="email" style="width: 178px" onfocus="hideerror()"></td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td ><label id="Label1"><strong>Confirm Email</strong></label></td>
            <td >
            <input name="cemail" type="text" id="cemail" style="width: 177px" onchange="compare_mail();" onfocus="hideerror()"></td>
            <td  ><label id="message1"></label></td>
        </tr>
        <tr>
            <td ><label id="Label1"><strong>Password</strong></label></td>
            <td style="height: 33px;">
            <input name="password" type="password" maxlength="12" style="height: 26px; width: 177px;" id="password" onfocus="hideerror()"></td>
            <td >
            </td>
        </tr>
        <tr>
            <td ><label id="Label1"><strong>Confirm Password</strong></label></td>
            <td >
            <input name="cpassword" type="password" maxlength="12" onchange="compare_password();" id="cpassword" class="auto-style15" style="width: 179px" onfocus="hideerror()"></td>
            <td ><label id="message2"></label>&nbsp;</td>
        </tr>
        <tr>
            <td ><label id="Label1"><strong>Mobile Number</strong></label></td>
            <td>
            <input name="mobile" type="text" maxlength="10" style="width: 177px" id="mobile" onfocus="hideerror()"></td>
            <td ><label id="mobile_error"></label></td>
        </tr>
        <tr>
            <td style="width: 152px">&nbsp;</td>
            <td>&nbsp;</td>
            <td style="width: 240px">&nbsp;</td>
        </tr>
        <tr>
            <td>
            <input name="register" type="submit" id="register" value="Register"></td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td >&nbsp;</td>
            <td>&nbsp;</td>
            <td >&nbsp;</td>
        </tr>
        <tr>
            <td ><label id="massege" style="visibility:hidden">Please Fill out all the fields</label></td>
        </tr>
    </table>
    </form>

这是我的javascript验证函数

function validate(){
var x=document.forms["myForm"]["email"].value;
var x1=document.forms["myForm"]["fname"].value;
var x2=document.forms["myForm"]["lname"].value;
var x3=document.forms["myForm"]["email"].value;
var x4=document.forms["myForm"]["cemail"].value;
var x5=document.forms["myForm"]["password"].value;
var x6=document.forms["myForm"]["cpassword"].value;
var x7=document.forms["myForm"]["mobile"].value;
        if(!x1||!x2||!x3||!x4||!x5||!x6||!x7)
        {
            document.getElementById('massege').style.visibility='visible';
            return false;
        }
        else
        {
            document.getElementById('message').style.visibility='hidden';
        } 
        var atpos=x.indexOf("@");
        var dotpos=x.lastIndexOf(".");
        if(!atpos||!dotpos)
        {
            alert("Not a valid e-mail address");
            return false;
        }
         if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
         {
             alert("Not a valid e-mail address");
             return false;
         }
         if(x7.length<10)
         {
            document.getElementById('mobile_error').innerHTML="Mobile number should be 10 digits";
         }
         if(x5!=x6)
         {
            document.getElementById('message2').innerHTML="Password does't match";
            return false;
         }
}

出于调试目的,我建议将<input type='button'>添加到具有调用validate()函数的onclick事件的页面中。这将允许您在不提交表单的情况下运行验证函数。最有可能的问题是验证函数中的错误,页面正在提交,因为函数出错而不是像预期的那样返回true/false。在页面提交之前,您可以看到有错误。

有打字错误:

    else
    {
        document.getElementById('message').style.visibility='hidden';
    } 

应该是" message "

建议:请使用firebug或chrome的开发工具调试javascript代码