如何避免在一个字段出现错误时要求用户重新填写所有表单字段

Question

php新手，非常感谢您的帮助：

我制作了一个注册表单脚本来通过多个错误处理程序验证用户的输入。 （检查有效的电子邮件、密码和密码重新输入匹配等）。

如果用户填写了所有字段但有一个错误（未能通过错误处理程序），我想将其他字段发送回同一个表单，这样用户就不必重新填写.因此，如果密码 dint 匹配，我想重新加载同一页面，但填写其他文件。

我可以在页面的 url 中看到信息，但在表单字段中看不到。 在我的表单 HTML 下方

<div class="register-content">
                <form action="includes/signup.inc.php" method="POST" class="margin-bottom-0">
                    <label class="control-label">Name <span class="text-danger">*</span></label>
                    <div class="row row-space-10">
                        <div class="col-md-6 m-b-15">
                            <input type="text" name="uFirst" class="form-control" placeholder="First name" required />
                        </div>
                        <div class="col-md-6 m-b-15">
                            <input type="text" name="uLast" class="form-control" placeholder="Last name" required />
                        </div>
                    </div>

                    <label class="control-label">Username <span class="text-danger">*</span></label>
                    <div class="row m-b-15">
                        <div class="col-md-12">
                            <input type="text" name="uName" class="form-control" placeholder="Username" required />
                        </div>
                    </div>

                    <label class="control-label">Email <span class="text-danger">*</span></label>
                    <div class="row m-b-15">
                        <div class="col-md-12">
                            <input type="text" name="mail" class="form-control" placeholder="Email address" required />
                        </div>
                    </div>


                    <label class="control-label">Password <span class="text-danger">*</span></label>
                    <div class="row m-b-15">
                        <div class="col-md-12">
                            <input type="password" name="pwd" class="form-control" placeholder="Password" required />
                        </div>
                    </div>

                    <label class="control-label">Re-enter Password <span class="text-danger">*</span></label>
                    <div class="row m-b-15">
                        <div class="col-md-12">
                            <input type="password" name="pwd-repeat" class="form-control" placeholder="Re-enter Password" required />
                        </div>
                    </div>

在我的php代码下面

<?php if(isset($_POST['signup-submit'])) {

  require 'dbh.inc.php';

  $firstName=$_POST['uFirst'];
  $lastName=$_POST['uLast'];
  $userName=$_POST['uName'];
  $email=$_POST['mail'];
  $password=$_POST['pwd'];
  $passwordRepeat=$_POST['pwd-repeat'];

  if (!filter_var($email, FILTER_VALIDATE_EMAIL) && !preg_match("/^[a-zA-Z0-9]*$/", $username)) {
    header("location: ../signup.php?error=invalidemail&uid&uFirst=".$firstName."&uLast=".$lastName);
    exit();

  } else if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
    header("location: ../signup.php?error=invalidemail&uFirst=".$firstName."&uLast=".$lastName."&uName=".$userName);
    exit();

  } else if (!preg_match("/^[a-zA-Z0-9]*$/", $username)) {
    header("location: ../signup.php?error=invaliduid&uFirst=".$firstName."&uLast=".$lastName."&mail=".$email);
    exit();

  } else if ($password !== $passwordRepeat) {
    header("location: ../signup.php?error=passwordnotmatching&uFirst=".$firstName."&uLast=".$lastName."&uName=".$userName."&mail=".$email);
    exit();

?>

Answer 1

有几种方法可以解决这个问题。最终，有两个高级选项：

1. 将有效值传回新表单
2. 永远不要删除有效值（即 JavaScript + AJAX）

使用您当前的设置，(1) 会更简单。要使用您当前的设计，您需要将值存储在某处以传递回表单以进行渲染。最简单的方法是将它们添加到 URL 参数（查询字符串）中，但其他选项包括 cookie 或会话存储。

最简单的选择是将表单和验证合并到一个端点中，而不是将它们分开。这样，在呈现带有错误消息的表单时，您已经拥有发布数据。

一旦你有了这些值，你可以简单地将它们插入到带有value属性的HTML表单中（确保对任何用户输入值进行HTML编码（htmlentities）以避免XSS漏洞）。

例如：

 <input type="text" name="uFirst" class="form-control" placeholder="First name" value="<?= htmlentities($firstName) ?>" required />

我刚刚注意到（来自其中一个 cmets）您已经在使用现有重定向的查询字符串中传递了有效值。在这种情况下，您可以简单地执行以下操作：

 <input type="text" name="uFirst" class="form-control" placeholder="First name" value="<?= htmlentities($_GET["uFirst"]??"") ?>" required />

对值进行编码非常重要。 未正确编码值，尤其是来自用户输入的值，可能会让恶意用户制作破坏 HTML 并更改页面的值，这是一个称为 Cross 的漏洞-Site Scripting（或简称 XSS）。