0

这是 HTML 联系表格：

<form class="form" method="post" action="mail.php">

     <label for="name">Name:</label>
     <input class="name" type="text" name="name" value="" placeholder="Full Name" required>

      <label for="email">Email:</label>
      <input class="email" type="text" name="email" value="" placeholder="Email" required>

      <label for="message">Message:</label>
      <textarea class="message" rows="4" cols="20" name="message" placeholder="Type..." required></textarea>

      <input type="submit" value="Send">

这是我用于联系表单的 Ajax：

$('.form').submit(function() {
var name = $(".name").val();
var email = $(".email").val();
var message = $(".message").val();
var dataString = 'name=' + name + '&email=' + email + '&message=' + message;
$.ajax({
type : "POST",
url : "mail.php",
data : dataString,
cache : false,
success : function() {  
$(".form").hide();
$(".notice").fadeIn(400);
}
});
return false;
});

这是我的mail.php（我在这里找到）：

<?php
if(filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)){
    $email = $_POST['email'];
    $message = $_POST['message'];
    $formcontent="From: $name \n Message: $message";
    $recipient = "example@example.com";
    $subject = "Contact Form";
    $mailheader = "From: $email \r\n";
    mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");

} else {
    header("Location: your_form.html");
}

我只想使用 Ajax 在我的表单中添加一条“无效的电子邮件地址”消息（为了在表单之外显示，而不是在另一个页面中）

在当前表单中，当用户提交已填写且有效的输入时，它会显示一条成功消息 ( .notice)，但当您使用无效的电子邮件地址提交表单时不会发生任何事情。

4

3 回答 3

2

您可以尝试将 PHP 脚本中的数组作为数据传递回您的 AJAX 响应，并让您的脚本处理传回的任何内容:) 在下面的示例中，我选择使用该json_encode函数将 PHP 响应传递回您的 AJAX 脚本，并任意选择一种状态码，您的 JS 函数将读取该状态码以采取适当的措施 :)

此外，为了$.ajax正确读取 JSON 数据，您应该dataType: "json"在函数中包含该行。

总体而言，建议的更改将是：

  1. 使用 JSON 格式从您的 PHP 脚本中回显响应json_encode()
  2. 允许您的 PHP 脚本将响应传递给您的 JS 脚本
  3. 确保您的 AJAX 函数读取 JSON 格式，然后采取适当的措施

例如，在您的 PHP 脚本中，您可以使用：

if(filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)){
    // If email is valid
    $email = $_POST['email'];
    $message = $_POST['message'];
    $formcontent="From: $name \n Message: $message";
    $recipient = "example@example.com";
    $subject = "Contact Form";
    $mailheader = "From: $email \r\n";

    if(mail($recipient, $subject, $formcontent, $mailheader)) {
        // If mail is sent
        // Status is arbitrary. You can use a string, number... I usually use numbers
        $resp = array("status"=>1, "message"=>"Mail successfully sent.");
    } else {
        // If sending failed
        $resp = array("status"=>2, "message"=>"Error with sending mail.");
    }
} else {
    // If email failed filter check
    $resp = array("status"=>3, "message"=>"You have provided an invalid email address. Please check the email address provided.");
}

// Echos the $resp array in JSON format, which will be parsed by your JS function
echo json_encode($resp);

在您的 JS 文件中，您可以解析 JSON 响应：

$('.form').submit(function() {
    // Define variables to construct dataString. You don't need to use var to declare each variable individually ;)
    var name = $(".name").val(),
        email = $(".email").val(),
        message = $(".message").val();

    // Construct dataString
    var dataString = 'name=' + name + '&email=' + email + '&message=' + message;

    // Ajax magic
    $.ajax({
        type: "POST",
        url: "mail.php",
        data: dataString,
        dataType: "json",
        cache: false,
        success: function(data) {
            if(data.status == "1") {
                $(".form").hide();
                $(".notice").fadeIn(400);
            } else if (data.status == "2") {
                // Error handling for failure in mail sending
            } else if (data.status == "3") {
                // Error handling for failure in email matching
            } else{
                // Catch all other errors
            }
        }
    });
    return false;
});
于 2013-09-15T08:50:43.290 回答
0

首先将您的 PHP 更改为输出Invalid Email Address以防电子邮件地址无效，然后检查该消息是否作为来自 ajax 的响应存在：

if(filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)){
    $email = $_POST['email'];
    $message = $_POST['message'];
    $formcontent="From: $name \n Message: $message";
    $recipient = "example@example.com";
    $subject = "Contact Form";
    $mailheader = "From: $email \r\n";
    mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
}else{
   echo "Invalid Email Address";
}

并将ajax更改为：

$('.form').submit(function() {
var name = $(".name").val();
var email = $(".email").val();
var message = $(".message").val();
var dataString = 'name=' + name + '&email=' + email + '&message=' + message;
$.ajax({
type : "POST",
url : "mail.php",
data : dataString,
cache : false,
success : function(data) {
if(data.indexOf("Invalid Email Address") >= 0){
 alert("Invalid Email Address");
}else{
$(".form").hide();
$(".notice").fadeIn(400);
}
}
});
return false;
});
于 2013-09-15T08:50:41.727 回答
0

您将要为此使用正则表达式和filter_var。我们将同时验证 Javascript和PHP，因为用户可能没有启用 Javascript。

我通常用来验证电子邮件的正则表达式是这样的：

[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?

当你的表单被提交时，你会想要运行这样的东西：

var email = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;
if(email.test($('.email').val()) === FALSE) {
    $('.notice').html('<strong>Invalid email address!</strong>').show();
    return false;
}

在您的 PHP 中，一旦您检查了 POST 请求是否有效并且是否包含您需要filter_var使用FILTER_VALIDATE_EMAIL参数运行的所有字段。filter_var返回一个布尔值。

if(filter_var($email, FILTER_VALIDATE_EMAIL) === FALSE) {
    echo 'Invalid email address!';
    exit;
}
于 2013-09-15T08:59:20.527 回答