这是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;
});
这是我的邮件.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
),但当您使用无效的电子邮件地址提交表单时,没有任何反应。
您可以尝试将数组从 PHP 脚本作为数据传递回 AJAX 响应,并让脚本处理传回的任何内容:)在下面的示例中,我选择使用 json_encode
函数将 PHP 响应传递回 AJAX 脚本,并任意选择一种状态代码类型,该状态代码将由您的 JS 函数读取以采取适当的操作:)
此外,为了使$.ajax
正确读取 JSON 数据,您应该在函数中包含行dataType: "json"
。
总体而言,建议的更改将是:
- 使用 JSON 格式回显来自 PHP 脚本的响应
json_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;
});
首先将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;
});
您将需要为此使用正则表达式,并且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_VALIDATE_EMAIL
参数运行filter_var
。 filter_var
返回一个布尔值。
if(filter_var($email, FILTER_VALIDATE_EMAIL) === FALSE) {
echo 'Invalid email address!';
exit;
}