PHP注册表单:如果出现错误，将输入框设置为红色边框 - PHP registration form: Make the inputs with red borders if there is an error

PHP registration form: Make the inputs with red borders if there is an error

我正在用PHP做一个注册表单，我想做一些事情:如果用户没有正确完成表单，我想，除了错误消息，使输入(有错误)与红色边框。

我的注册表单(HTML部分):

<?php if(!empty($errors)): ?>
<div class="flash-message error">
    <h3>You have not completed the form correctly. The error(s) come(s) from the following thing(s):</h3>
    <ol>
        <?php foreach($errors as $error): ?>
        <li>
            <p><?= $error; ?></p>
        </li>
        <?php endforeach; ?>
    </ol>
</div>
<?php endif; ?>
<h1 class="page-heading"><?php echo $title; ?></h1>
<form action="" method="post">
    <ul>
        <li>
            <label for="nickname">Nickname:</label> <input id="nickname" name="nickname" type="text">
            <p class="input-description">Your nickname will be as an identity on the site; it will be displayed wherever you will post, etc.</p>
        </li>
        <li>
            <label for="email">Email:</label> <input id="email" name="email" type="text" placeholder="your@email.com">
            <p class="input-description">Enter a valid email to receive the confirmation link to validate your account.</p>
        </li>
        <li>
            <label for="password">Password:</label> <input id="password" name="password" type="password">
            <p class="input-description">Enter a password to sign in to your account. Try to put a difficult password to make it more complicated to find.</p>
        </li>
        <li>
            <label for="password-confirmation">Password Confirmation:</label> <input id="password-confirmation" name="password-confirmation" type="password">
            <p class="input-description">Confirm the password that you have put in the field above.</p>
        </li>
    </ul>
    <button type="submit" class="button primary">Sign Up</button>
</form>

当前结果:http://prntscr.com/86h5r2

PHP代码:

<?php
if(!empty($_POST))
{
    /* Nickname */
    if(empty($_POST["nickname"]))
    {
        $errors["nickname"] = "You have not completed the nickname field.";
    }
    elseif(!preg_match("/^[a-zA-Z0-9 _]+$/", $_POST["nickname"]))
    {
        $errors["nickname"] = "Your nickname is not valid.";
    }
    /* E-mail */
    if(empty($_POST["email"]))
    {
        $errors["email"] = "You have not completed the email field.";
    }
    elseif(!filter_var($_POST["email"], FILTER_VALIDATE_EMAIL))
    {
        $errors["email"] = "Your email is not valid.";
    }
    /* Password */
    if(empty($_POST["password"]))
    {
        $errors["password"] = "You have not completed the two password fields.";
    }
    elseif($_POST["password"] != $_POST["password-confirmation"])
    {
        $errors["password"] = "The passwords did not match. Please enter the same password in both fields.";
    }
}
?>

要在带有错误的输入中添加边框，您需要在类属性中嵌入一个PHP if语句。只需在css

中定义classname

<input type="text" class="<?=  isset($error['name']) ? 'has-error'  : ''   ?>" value="" >

为<li>添加样式是一种方法

<ol>
    <?php foreach($errors as $error): ?>
    <li style="border:red solid 1px">
        <p><?= $error; ?></p>
    </li>
    <?php endforeach; ?>
</ol>

一个更好的方法是创建一些css，然后添加一个类到你的<li>

<style>
  .an-error-msg {
     border:red solid 1px;
     -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
     border-radius: 10px; /* future proofing */
     -khtml-border-radius: 10px; /* for old Konqueror browsers */
   }
</style>
<ol>
    <?php foreach($errors as $error): ?>
    <li class="an-error-msg">
        <p><?= $error; ?></p>
    </li>
    <?php endforeach; ?>
</ol>

为什么不像这样在客户端使用required属性:https://jsfiddle.net/kn7qjg6c/

 <form method="post">
<input type="text" placeholder="name" required/>
<input type="submit" />
</form>

CSS

input:required:focus { border: 1px solid red; outline: none; }