当PHP筛选器验证电子邮件检测到无效提交时,使用Ajax显示失败消息

当PHP筛选器验证电子邮件检测到无效提交时,使用Ajax显示失败消息,php,jquery,ajax,email-validation,Php,Jquery,Ajax,Email Validation,这是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">

这是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">
$('.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更改为输出无效电子邮件地址,以防电子邮件地址无效,然后检查该消息是否作为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;
});

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

另外,为了使
$.ajax
正确读取JSON数据,应该在函数中包含
数据类型:“JSON”

总的来说,建议的变化将是:

  • 使用
    JSON\u encode()
  • 允许PHP脚本将响应传递给JS脚本
  • 确保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;
    });
    

    你会想用正则表达式来表达,然后。我们将在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;
    }
    

    您确定这些解析JSON响应代码吗?它有一个JS错误,在
    $.ajax
    函数中省略了一个逗号。再试一次。JS可以工作,但当我按下提交按钮时什么也没发生。我在问题中添加了我的HTML表单结构。什么是什么意思?没有使用有效的电子邮件地址发送电子邮件,当存在无效电子邮件或。。。?可能出现问题的方式有很多,我需要有关问题的更多详细信息。当我单击“提交”按钮时,无论是否有有效的电子邮件地址,都不会发生任何事情。没有错误或成功消息(注意,
    。注意,
    不会出现),正如我所说的“什么都不会发生”,就像我单击了一个假按钮。哦,它将所有内容都视为无效的电子邮件地址,所有内容。我只是复制/粘贴了你的PHP和JS代码,它显示了一条针对有效电子邮件地址的无效消息
    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;
    }
    
    if(filter_var($email, FILTER_VALIDATE_EMAIL) === FALSE) {
        echo 'Invalid email address!';
        exit;
    }