如何使PHP注册错误位于其专用输入框之下

Question

我只是想知道是否有人知道如何在这个屏幕截图中显示错误：https://imgur.com/a/eaTVR9g放在他们专用的输入框下面，如这张图片：https://imgur.com/a/Sb1AfUj，如果有人愿意为我做这件事，我会非常感激的。谢谢!

这里是我的代码：

<?php
$title = "Register";
include ($_SERVER['DOCUMENT_ROOT'] . '/private/header.php');

if ($AUTH) {
    header ('Location: /');
    die();
}

if (isset($_POST['go'])) {
    $username = $_POST['username'];
    $email = strtolower($_POST['email']);
    $password = $_POST['password'];
    $passwordConfirm = $_POST['confirmPassword'];
    $protectedPassword = password_hash($password, PASSWORD_ARGON2I);

    // Validation Checks

    $errors = array();

    $Emailstmt = $db->prepare("SELECT * FROM `Users` WHERE `Email` = :email;");
    $Emailstmt->bindParam(':email', $email, PDO::PARAM_STR);
    $Emailstmt->execute();

    if ($Emailstmt->rowCount() > 0) {
        $error[] = 'The email you tried to use is already being used on an different account, please use another one.';
    }
    $Userstmt = $db->prepare("SELECT * FROM `Users` WHERE `Username` = :username;");
    $Userstmt->bindParam(':username', $username, PDO::PARAM_STR);
    $Userstmt->execute();

    $checkIP = $db->prepare("SELECT count(*) FROM `Users` WHERE `LastIP` = :regIP");
    $checkIP->bindParam(":regIP", $UserIP, PDO::PARAM_STR);
    $checkIP->execute();
    $checkIpAdress = $checkIP->fetchColumn();

    if (empty($checkIpAdress)) {
        $checkIpAdress = 0;
    }

    if ($checkIpAdress) {

        if ($checkIpAdress > 3) {
            array_push($errors, 'It looks like you have registered too many accounts under this IP address.');
        }
    }

    if (strlen($username) < 3) {
        array_push($errors, 'Your username must be at least 3 characters in total.');
    }
    if (strlen($password) < 5) {
        array_push($errors, 'Your password must be at least 5 characters in total.');
    }

    if ($Userstmt->rowCount() > 0) {
        array_push($errors, 'The username you tried to use is already being used, Maybe try to pick another one.');
    }

    if (filter_var($email, FILTER_VALIDATE_EMAIL)) {
        //echo("$email is a valid email address");
    } else {
        array_push($errors, 'The email you specified(' . htmlspecialchars($email, ENT_QUOTES, "UTF-8") . ') is invaild.');
    }
    if (!preg_match("/^[a-zA-Z0-9][\w\.]+[a-zA-Z0-9]$/", $username)) {
        array_push($errors, 'The username you specified(' . htmlspecialchars($username, ENT_QUOTES, "UTF-8") . ') contains special symbols or is invaild.');
    }
    if (strtolower($username) == strtolower($password)) {
        array_push($errors, 'Your password can not be the same as your username.');
    }
    if ($password !== $passwordConfirm) {
        array_push($errors, 'It looks like your passwords do not match.');
    }
    // Begin form submission
    if (empty($errors)) {

        $insert = $db->prepare("INSERT INTO `Users` (`Username`,`Email`,`Password`,`LastIP`,`TimeRegister`,`AvatarURL`) VALUES (:Username,:Email,:Password,:LastIP,:TimeRegister,:AvatarURL)");
        $insert->bindParam(":Username", $username, PDO::PARAM_STR);
        $insert->bindParam(":Email", $email, PDO::PARAM_STR);
        $insert->bindParam(":Password", $protectedPassword, PDO::PARAM_STR);
        $insert->bindParam(":LastIP", $UserIP, PDO::PARAM_STR);
        $insert->bindParam(":TimeRegister", $now, PDO::PARAM_INT);
        $insert->bindValue(":AvatarURL", '8ca17bec-0320-4293-90e5-dfc5b8690156', PDO::PARAM_STR);
        $insert->execute();
?>

<div class="space">
    <section class="hero is-success">
        <div class="hero-body modal-button" data-target="modal" aria-haspopup="true"
            style="padding: 1rem 1rem !important;">
            <center>You have successfully registered! Please wait while we redirect you.</center>
        </div>
    </section><br>
</div>
<meta http-equiv='refresh' content='5;url=/auth/login' />

<?php
    } else {
    }
}
if ($SiteSettings->Registration == 0) {
    echo '<section class="section">
    <div class="container">
        <div class="columns is-centered">
            <div class="column is-7">

                <div class="box">
                      <p>We\'re sorry, but account creation is currently disabled right now. Please try again later.</p>
                    </div>
                    </div>
                </div>
            </section>


                    ';
    include($_SERVER['DOCUMENT_ROOT'] . "/private/footer.php");
    die;
}
?>

<section class="section">
    <div class="container">
        <div class="columns is-centered">
            <div class="column is-7">

                <div class="box">
                    <div class="title is-size-4">Register</div>
                    <form action="#" method="POST">
                        <input type="hidden" name="token" value="<?php echo $_SESSION["csrf_token"]; ?>" />
                        <div class="field">
                            <label class="label">Username</label>
                            <div class="control has-icons-left">
                                <input class="input" name="username" type="text" id="username" maxlength="15"
                                    autocomplete="off" placeholder="Enter a username">
                                <span class="icon is-small is-left"><i class="fas fa-user"></i></span>
                                <p id="username_message"></p>

                            </div>
                        </div>
                        <div class="field">
                            <label class="label">E-Mail address</label>
                            <div class="control has-icons-left">
                                <input class="input" name="email" type="email" id="email" maxlength="128"
                                    autocomplete="off" placeholder="Enter your e-mail address.">
                                <span class="icon is-small is-left"><i class="fas fa-envelope"></i></span>
                                <p id="email_message"></p>

                            </div>
                        </div>
                        <div class="field">
                            <label class="label">Password</label>
                            <div class="control has-icons-left">
                                <input class="input" name="password" type="password" id="password" maxlength="45"
                                    autocomplete="off" placeholder="Enter your password.">
                                <span class="icon is-small is-left"><i class="fas fa-lock"></i></span>
                                <p id="password_message"></p>

                            </div>
                        </div>
                        <div class="field">
                            <label class="label">Confirm Password</label>
                            <div class="control has-icons-left">
                                <input class="input" name="confirmPassword" type="password" id="confirmPassword"
                                    maxlength="45" autocomplete="off" placeholder="Confirm your password">
                                <span class="icon is-small is-left"><i class="fas fa-lock"></i></span>

                                <p id="confirmPassword_message"></p>
                            </div>
                        </div>

                        <div class="push-5"></div>

                        <button class="button is-success is-fullwidth" type="submit" name="go"><b>Register</b></button>
                    </form>

                    <?php
                    if (!empty($errors)) {

                    ?>

                    <?php

                        foreach ($errors as $error) {
                            echo '<p class="help has-text-danger">' . $error . '</p>';
                        }

                    } ?>

                </div>
                <p class="has-text-centered">Already a member? <a href="/auth/login">Login</a></p>
            </div>
        </div>
    </div>
</section>

<?php include ($_SERVER['DOCUMENT_ROOT'] . '/private/footer.php'); ?>

Answer 1

您可以组织数组键以反映它们与之相关的字段，IE：

    if (strlen($username) < 3) {
        $errors['username'][] = 'Your username must be at least 3 characters in total.';
    }

然后在显示端，您可以使用上述键来识别哪些错误属于哪个字段，IE：

   <div class="field">
       <label class="label">Username</label>
       <div class="control has-icons-left">
       <input class="input" name="username" type="text" id="username" maxlength="15" autocomplete="off" placeholder="Enter a username">
       <span class="icon is-small is-left"><i class="fas fa-user"></i></span>
       <p id="username_message">
           <?php if (isset($errors['username'])): ?>
               <?php foreach($errors['username'] as $error): ?>
                   <?= $error ?> <br/>
               <?php endforeach; ?>
           <?php endif; ?>    
       </p>   
   </div>