使用Javascript/PHP进行HTML表单验证

我已经建立了一个基本的联系表单，通过PHP发送表单数据。这很好，但是我在将验证脚本嵌入到代码中时遇到了问题，无法防止表单在没有输入数据时提交

到目前为止，我的代码是：

要通过电子邮件发送数据，请执行以下操作：

<?php  
//validate 
if(isset($_POST['submit']))
{
$to="email@testemail.com";
$name=$_REQUEST['name'];
$email=$_REQUEST['email'];
$subject="Contact Us";
$body="Name: $name \n\n Email Address: $email \n\n";
$sent=mail($to, $subject, $body);
echo 'Sent'; die;  
} 
// 
?>

JS发布表单：

$(document).ready(function() {
$("#form1").validate({
    submitHandler: function() {
        //submit the form
$.post("<?php echo $_SERVER[PHP_SELF]; ?>", //post
            $("#form1").serialize(), 
            function(data){
              //if message is sent
              if (data == 'Sent') {
                $("#message").fadeIn(); //show confirmation message

            }
            //
        });
        return false; //don't let the page refresh on submit.
    }
}); //validate the form
});

$（文档）.ready（函数（）{
$（“#表格1”）。验证({
submitHandler:function（）{
//提交表格
$.post（“，//post
$（“#form1”）.serialize（），
功能（数据）{
//如果消息已发送
如果（数据==“已发送”）{
$（“#消息”）.fadeIn（）；//显示确认消息
}
//
});
return false；//提交时不要刷新页面。
}
})；//验证表单
});

HTML表单

<div id="contact-form">
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1"> 

<input type="text" id="name" name="name"/>
<input type="text" id="email" name="email"/>  
<input name="submit" type="submit" title="Submit" class="submit_go" value="Submit"/>

</form>
<div id="message">Thank you for your message</div>
</div>

谢谢你的留言

我已尝试集成以下验证脚本，但这不会阻止表单提交

验证脚本

 function leftValue(e, t, n) {
$(this).text(t.parent()[0].style.left)
}
$(document).ready(function() {
required = ["name", "email"];
email = $("#email");
errornotice = $("#error");
emptyerror = "Required Field";
emailerror = "Required Field";
$("#form1").submit(function() {
    for (i = 0; i < required.length; i++) {
        var e = $("#" + required[i]);
        if (e.val() == "" || e.val() == emptyerror) {
            e.addClass("form-error");
            e.val(emptyerror);
            errornotice.fadeIn(750)
        } else {
            e.removeClass("form-error")
        }
    }
    if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-  Z0-9]{2,4})+$/.test(email.val())) {
        email.addClass("form-error");
        email.val(emailerror)
    }
    if ($(":input").hasClass("form-error")) {
        return false
    } else {
        errornotice.hide();
        return true
    }
});
$(":input").focus(function() {
    if ($(this).hasClass("form-error")) {
        $(this).val("");
        $(this).removeClass("form-error")
    }
})
});

函数leftValue（e，t，n）{
$（this）.text（t.parent（）[0].style.left）
}
$（文档）.ready（函数（）{
必需=[“名称”，“电子邮件”]；
电子邮件=$（“#电子邮件”）；
errornotice=$（“#错误”）；
emptyerror=“必填字段”；
emailerror=“必填字段”；
$（“#form1”）.submit（函数（）{
对于（i=0；i

它可能只是简单的

$（“：input”）.hasClass（“表单错误”）

$（“input”）.hasClass（“表单错误”）

。我看不到任何其他东西会阻止这项工作

尽管我建议另一条路线。与其将类

form error

添加到输入中，然后在末尾查找该类的输入，以确定是否存在错误，不如设置一个布尔标志，说明存在错误。这样，就不需要额外的DOM查找，这是一项昂贵的操作

$("#form1").submit(function() {
    var isValid = true;
    for (i = 0; i < required.length; i++) {
        var e = $("#" + required[i]);
        if (e.val() == "" || e.val() == emptyerror) {
            e.addClass("form-error");
            e.val(emptyerror);
            errornotice.fadeIn(750);
            isValid = false;
        } else {
            e.removeClass("form-error")
        }
    }
    if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-  Z0-9]{2,4})+$/.test(email.val())) {
        email.addClass("form-error");
        email.val(emailerror);
    }
    if (!isValid) {
        return false;
    } else {
        errornotice.hide();
        return true;
    }
});

$（“#form1”）.submit（函数（）{
var isValid=true；
对于（i=0；i

它可能只是简单的

$（“：input”）.hasClass（“表单错误”）

$（“input”）.hasClass（“表单错误”）

。我看不到任何其他东西会阻止这项工作

尽管我建议另一条路线。与其将类

form error

添加到输入中，然后在末尾查找该类的输入，以确定是否存在错误，不如设置一个布尔标志，说明存在错误。这样，就不需要额外的DOM查找，这是一项昂贵的操作

$("#form1").submit(function() {
    var isValid = true;
    for (i = 0; i < required.length; i++) {
        var e = $("#" + required[i]);
        if (e.val() == "" || e.val() == emptyerror) {
            e.addClass("form-error");
            e.val(emptyerror);
            errornotice.fadeIn(750);
            isValid = false;
        } else {
            e.removeClass("form-error")
        }
    }
    if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-  Z0-9]{2,4})+$/.test(email.val())) {
        email.addClass("form-error");
        email.val(emailerror);
    }
    if (!isValid) {
        return false;
    } else {
        errornotice.hide();
        return true;
    }
});

$（“#form1”）.submit（函数（）{
var isValid=true；
对于（i=0；i

除了在客户端进行验证之外，您还必须在服务器端进行验证（使用PHP）。无法保证客户端验证会发生（用户甚至可能完全禁用了javascript），也无法保证输入来自您的页面

客户端验证：用户的眼力

服务器端验证：真正的安全和保护发生在哪里

FWIW:html5允许通过浏览器进行客户端验证

<form [...]> 
  <input type="text" id="name" name="name" required="required" placeholder="Name" minlength="2" />
  <input type="email" id="email" name="email" required="required" placeholder="Email" />  
  <input name="submit" type="submit" title="Submit" class="submit_go" value="Submit" />
</form>

更多信息：

---

除了在客户端进行验证外，您还必须在服务器端进行验证（使用PHP）。无法保证客户端验证会发生（用户甚至可能完全禁用了javascript），也无法保证输入来自您的页面

客户端验证：用户的眼力

服务器端验证：真正的安全和保护发生在哪里

FWIW:html5允许通过浏览器进行客户端验证

<form [...]> 
  <input type="text" id="name" name="name" required="required" placeholder="Name" minlength="2" />
  <input type="email" id="email" name="email" required="required" placeholder="Email" />  
  <input name="submit" type="submit" title="Submit" class="submit_go" value="Submit" />
</form>

更多信息：

---

谢谢你的提示。这解决了验证的问题，但现在当表单提交时，它会显示一个新页面，其中包含“Sent”字样，而不是在与表单相同的页面上显示#message div？我认为发生的是ajax调用，但是