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

Question

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

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

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

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

我试图在 validate.php 的 else 语句中添加这个(上面提到的脚本) :

验证.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，这就是您看不到脚本的原因附加标签。从我的 Angular 来看，该字符串“Error”似乎不在您的代码中，所以我猜您没有粘贴整个代码。我的建议是，如果条件失败，则再次重定向到联系表单，并将 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>";
}

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