javascript - 在 php 表单提交之前添加电子邮件验证

Question

我有以下简单的表单，我正在尝试将电子邮件验证错误发送到 在提交之前显示在表单中以显示错误。

有没有办法用 PHP 来做到这一点还是我必须使用 JSON？

如果我必须使用 JSON，谁能告诉我该怎么做？

提前致谢。

表单.html:

<form method="post" name="form" action="form.php">
<p>Robot: <input type="text" name="robot" ></p> 
<p>Name: <input type="text" name="name" ></p>
<p>Email:    <input type="email" name="email"></p>
<p>Phone:    <input type="telephone" name="phone"></p>
<p>Message:  <textarea name="message"></textarea></p>
<p><input type="submit" value="Send Form"></p>
</form>
<div id="error"></div>

表单.php

<?php

// send to and from
$to = "email@example.com";
$headers = "From: email@example.com \r\n";
$headers .= "Reply-To: email@example.com \r\n";

// form inputs
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$message = $_POST['message'];
$robot = $_POST['robot'];

// email message
$email_subject = "Web Contact Message";

$email_body =   
"A message from your website contact form \n\n".
"Email: $email \n\n".
"Phone: $phone \n\n".
"From: $name \n\n".
"Message: \n". 
"$message \n";

// honeypot
if($robot)
header( "Location: http://www.example.com/nothankyou.html" );
    else{

//validate email
if(!filter_var($email, FILTER_VALIDATE_EMAIL))
 {
 echo '<div id="error">Please Enter a Valid Email</div>';
 }
else
 {

// send it
 mail($to,$email_subject,$email_body,$headers); 
 header( "Location: http://www.example.com/thankyou.html" );

 }  
 }   
?>

Answer 1

您可以尝试使用 javascript/jquery 插件进行前端验证(例如 http://jqueryvalidation.org/ 、 http://bootstrapvalidator.com/ )。如果您仍然想保留现有代码，我建议如下:

首先，将 form.html 合并到 form.php 确保您的 php 邮件代码位于文件顶部，因为 php header 在调用它们之前无法完成任何输出。

    <?php
if (count($_POST)) {

// send to and from
    $to = "email@example.com";
    $headers = "From: email@example.com \r\n";
    $headers .= "Reply-To: email@example.com \r\n";

// form inputs
    $name = $_POST['name'];
    $email = $_POST['email'];
    $phone = $_POST['phone'];
    $message = $_POST['message'];
    $robot = $_POST['robot'];

// email message
    $email_subject = "Web Contact Message";

    $email_body = "A message from your website contact form \n\n" .
            "Email: $email \n\n" .
            "Phone: $phone \n\n" .
            "From: $name \n\n" .
            "Message: \n" .
            "$message \n";

// honeypot
    if ($robot)
        header("Location: http://www.example.com/nothankyou.html");
    else {

//validate email
        if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
            header("Location: form.php?error=email_error");
        } else {

// send it
            mail($to, $email_subject, $email_body, $headers);
            header("Location: http://www.example.com/thankyou.html");
        }
    }
}
?>
<form method="post" name="form" action="">
    <p>Robot: <input type="text" name="robot" ></p> 
    <p>Name: <input type="text" name="name" ></p>
    <p>Email:    <input type="email" name="email"></p>
    <p>Phone:    <input type="telephone" name="phone"></p>
    <p>Message:  <textarea name="message"></textarea></p>
    <p><input type="submit" value="Send Form"></p>
</form>

<?php
if (isset($_GET["error"]) && $_GET["error"] == "email_error") {
    ?>
    <div id="error">Please Enter a Valid Email</div>
    <?php
}