PHP注册表单:如果出现错误,请使用红色边框进行输入

时间:2015-08-19 15:43:56

标签: php html css

我正在使用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.";
    }
}

?>

3 个答案:

答案 0 :(得分:3)

要在输入中添加边框,但是您希望在类属性中嵌入这样的php if语句。只需在你的css中定义classname

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

答案 1 :(得分:1)

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

答案 2 :(得分:0)

为什么不直接使用required属性作为客户端,如下所示:https://jsfiddle.net/kn7qjg6c/

<强> HTML

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

<强> CSS

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