如何使PHP寄存器错误放在其专用输入框下方

Question

我只是想知道是否有人知道如何制造此屏幕截图中显示的错误： https://i.stack.imgur.com/eXG3v.jpg 进入他们的专用输入框下方，如下图所示： https://i.stack.imgur.com/NtSOx.jpg 如果有人愿意为我做这件事，我将不胜感激。谢谢！

这是我的代码：

<?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

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

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

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

<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>