PHP/JavaScript 表单验证，无效电子邮件检查

Question

所以我正在为网站进行表单验证。

到目前为止，我所做的是在提交表单时，validate.php 检查电子邮件的格式是否正确。

如果是，它继续调用包含在validate.php 中的sendMail() 函数，该函数继续发送电子邮件，然后在 5 秒后将用户重定向回主页。 （这部分有效

如果不是，那就是我被卡住的地方。 我在这个阶段想要完成的是，以某种方式让 PHP 向当前页面 (contact.html) 发送一个脚本标签 <script> emailError(); </script> 并执行脚本，该脚本只是附加了一段说明电子邮件不正确的段落。然而，我 am 得到的是 validate.php 在 else 语句中有自己的错误，只是在空白页中说 Error （这是我不想要的，我把它放在那里看看验证是否正常工作）。

我试图在validate.php的else语句中添加这个（上面提到的脚本）：

validate.php

<?php
include "mail.php";
$email = $_POST['email'];

if (!filter_var($email, FILTER_VALIDATE_EMAIL) === false) {
  sendMail();
}else {
  echo("<script> emailError(); </script>");
}
?>

所以我希望它会做的是将它回显到执行 JavaScript 函数的页面中，但它不起作用，我想我知道为什么。

据我所知，PHP 会根据用户交互的请求（按下按钮、单击某物等）或页面加载时执行（如果我错了，请纠正我，仍在学习中）。

为了确保回显不起作用，我在使用表单时实时检查了页面，没有看到任何将脚本标记插入 HTML 的迹象。

在这一点上，我尝试了许多替代解决方案，我什至不知道从哪里开始。我真的可以使用一些帮助和任何提示来改进我的表单。

这是我正在处理的联系页面。随意尝试并亲自查看结果，但请不要发送垃圾邮件！

Click Here

emailError.js

这就是我想用 PHP 在页面中回显的内容。

function emailError(){
    var targetElement = document.getElementById("emailform");
    var errorElement = document.createElement("P");
    var errorMessage = document.createTextNode("Invalid Email");
    errorElement.appendChild(errorMessage);
    errorElement.setAttribute("id","error");
    document.body.appendChild(errorElement);
}

contact.html

这只是contact.html 的一部分，显示我的表单。

<form action="validate.php" method="post" id="emailform">
    <required>* - Required</required><br>
    <name>Name:* <input type="text" name="name" id="name" required /></name><br>
    <email>Email:* <input type="text" name="email" id="email" required /></email>    <br>
    <message>Message:*<br><textarea rows="5" name="message" id="message" maxlength="1000" required></textarea></message><br>
    <submit><input type="submit" value="Send" name="send" id="send" /></submit>
</form>

我不是要求复制粘贴的东西，只是想把我推向正确的方向。

Answer 1

嗯，首先，您将表单提交到validate.php，然后永远不会重定向回contact.html，这就是您看不到附加脚本标签的原因。从我看到的情况来看，该字符串“错误”似乎不在您的代码中，所以我猜您没有粘贴整个代码。我的建议是，如果条件失败，请再次重定向到联系表单，并将contact.html 更改为contact.php 以便能够进行验证。这是一些粗略的代码：

<?php
include "mail.php";
$email = $_POST['email'];

if (!filter_var($email, FILTER_VALIDATE_EMAIL) === false) {
  sendMail();
}else {
  header('Location: contact.php?error=1');
}
?>

然后，在您的 contact.php 文件中：

<form action="validate.php" method="post" id="emailform">
    <required>* - Required</required><br>
    <name>Name:* <input type="text" name="name" id="name" required /></name><br>
    <email>Email:* <input type="text" name="email" id="email" required /></email>    <br>
    <message>Message:*<br><textarea rows="5" name="message" id="message" maxlength="1000" required></textarea></message><br>
    <submit><input type="submit" value="Send" name="send" id="send" /></submit>
</form>

if ($_GET['error']) {
    echo "<script> emailError(); </script>";
}

这只是一个粗略的例子，它可以更健壮，使用这个解决方案，如果有人使用查询参数“错误”输入您的联系表单，他将执行 javascript。但正如我所说，这是一个概念，也是一个粗略的解决方案，用于解释如何解决问题。

Answer 2

你不能像你尝试的那样执行 java 函数。

如果你使用ajax，比在成功响应函数中，将响应设置为一个div。

例如，如果您有一个成功函数，它在名为 data 的参数中获取数据，则在您的页面中设置一个 ID 为“emailResponse”之类的空 div，并在函数中使用它：

var responseDiv = document.getElementById("emailResponse");
responseDiv.innerHtml = data;

将此添加到您的 html 中：

<form action="validate.php" method="post" id="emailform">
    <required>* - Required</required><br>
    <name>Name:* <input type="text" name="name" id="name" required /></name><br>
    <email>Email:* <input type="text" name="email" id="email" required /></email>    <br>
    <message>Message:*<br><textarea rows="5" name="message" id="message" maxlength="1000" required></textarea></message><br>
    <submit><input type="submit" value="Send" name="send" id="send" /></submit>
    <div id="emailResponse"></div>
</form>

在你的 PHP 中，改为：

if (!filter_var($email, FILTER_VALIDATE_EMAIL) === false) {
  sendMail();
  echo "Your message was sent!";
}else {
  echo "You email was invalid!";
}

更新： 如果您不使用 ajax - 您需要在 GET 中使用一些参数重定向到联系页面，或者设置一些 SESSION 变量。