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

Question

我已经设置了一个基本的联系表单，通过PHP通过电子邮件发送表单数据。 这工作正常，但我无法将验证脚本整合到代码中，以防止在没有输入数据时提交表单。

到目前为止我的代码是：

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

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

Answer 1

它可能就像$(":input").hasClass("form-error") > $("input").hasClass("form-error") 。 我没有看到任何阻止这种情况发生的事情。

虽然我建议另一条路线。 而不是将类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;
    }
});

Answer 2

除了在客户端验证之外，您还必须在服务器端进行验证（在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>

更多信息：

• https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Data_form_validation
• https://html.spec.whatwg.org/multipage/forms.html