如何在 PHP 联系表的每个不同字段中显示错误消息?

How to show an error message in each of different field for PHP Contact form?

我正在关注 tutorial 并填写了此联系表。它工作正常,但我想在每个字段中显示不同的消息,而不是使用一个框。我试着移动

<?php if($msg != ''): ?>
            <div class="alert <?php echo $msgClass; ?>"><?php echo $msg;?></div>
         <?php endif; ?>

在输入字段下方,就显示在该位置而言效果很好,但它只是一次显示相同的消息。它不会单独显示不同的消息。我将如何从这里开始?

body {
    font-size:10px;
    font-family:sans-serif, "Open-sans";
    margin:0;
    padding:0;
    box-sizing:border-box;
    letter-spacing:0.1rem;
}

.navbar {
    background:#333;
    width:100%;
}

.container {
    max-width:1100px;
    margin:auto;
}

.navbar-header {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}

.navbar-brand {
    font-size:1.5rem;
    padding:1rem;
    color:#fff;
    text-decoration:none;
}

form {
    font-size:1.3rem;
}

.form-group {
    display:flex;
    flex-direction: column;
    margin:1.5rem;
}

label {
    color:#333;
    margin-bottom:0.7rem;
}

input, textarea {
    max-width:100%;
    border:0.5px solid darkslategray;
    padding:1.3rem;
    font-size:1.5rem;
}

button {
    background:rgb(67, 130, 211);
    color:#fff;
    font-size:1.2rem;
    padding:1rem;
    margin:1.5rem;
    border:none;  
}

.alert {
    margin:1.5rem;
    padding:1.5rem;
    font-size:1.5rem;
    color:#fff; 
}

.alert-danger {
    background-color:rgb(219, 54, 48);
}

.alert-success {
    background-color:rgb(28, 160, 39);
}
<?php 
    // Message Vars
    $msg = '';
    $msgClass = '';
    
    // Check for submit
    if(filter_has_var(INPUT_POST,'submit')){
        // Get Form Data 
        $name = htmlspecialchars($_POST['name']); 
        $email = htmlspecialchars($_POST['email']);
        $message = htmlspecialchars($_POST['message']);

        // Check Required Fields
        if(!empty($email) && !empty($name) && !empty($message)){
            // Passed
            // Check Email 
            if(filter_var($email, FILTER_VALIDATE_EMAIL) === false ){
                // Failed
                $msg = 'Please use a valid email';
                $msgClass = 'alert-danger';
            } else { 
                // Passed
                $toEmail = 'johnDoe@gmail.com';
                $subject = 'Contact Request From '.$name;
                $body = '<h2>Contact Request</h2>
                    <h4>Name</h4><p>' .$name. '</p>
                    <h4>Email</h4><p>' .$email. '</p>
                    <h4>Message</h4><p>' .$message.'</p>
                    ';

                    // Email Headers
                    $headers = "MIME-Version: 1.0" . "\r\n";
                    $headers .= "Content-Type:text/html;charaset=UTF-8" . "\r\n";
                    
                    // Additional Headers
                    $headers .= "From: " .$name. "<".$email.">". "\r\n";

                    if(mail($toEmail, $subject, $body, $headers)){
                        // Email Sent
                        $msg = "Your email has been sent";
                        $msgClass = 'alert-success';
                    } else {
                        // Failed
                        $msg = "Your email was not sent";
                        $msgClass = 'alert-danger';
                    }
            }
        } else {
            // Failed
            $msg = 'Please fill in all fields';
            $msgClass = 'alert-danger';
        }
    }
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Contact US</title>
</head>
<body>
     <nav class="navbar">
        <div class="container">
            <div class="navbar-header">
                <a href="index.php" class="navbar-brand">My Website</a>
            </div>
        </div>
     </nav>
     <div class="container">
         <?php if($msg != ''): ?>
            <div class="alert <?php echo $msgClass; ?>"><?php echo $msg;?></div>
         <?php endif; ?>
        <form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post">
            <div class="form-group">
                <label for="name">Name</label> 
                <input type="text" name="name" class="form-control" value="<?php echo isset($_POST['name']) ? $name : ''; ?>">
            </div>
            <div class="form-group">
                <label for="name">Email</label>
                <input type="text" name="email" class="form-control" value="<?php echo isset($_POST['email']) ? $email : ''; ?>">
            </div>
            <div class="form-group">
                <label for="name">Message</label>
                <textarea name="message" class="form-control"><?php echo isset($_POST['message']) ? $message : ''; ?></textarea>
            </div>
            <button type="submit" name="submit" class="btn btn-primary">
            Submit</button>
        </form>
     </div>
</body>
</html>

这是我现在的表格。

我想让它看起来像这个。

您可以将验证警告存储在数组类型变量中,而不是字符串。

例如,这一行:

$msg = 'Please use a valid email';

您也可以这样做:

$msg['email'] = 'Please use a valid email';

此外,我认为您想要验证是否每个必填字段都有自己单独的 if 检查,而不是全部在一起,例如:

if(!empty($email) && !empty($name) && !empty($message)){

您可以实施为:

if (empty($email) || filter_var($email, FILTER_VALIDATE_EMAIL) === false) {
    $msg['email'] = 'Please use a valid email';
}

if (empty($name)) {
    $msg['name'] = 'Please enter a name';
}

if (empty($message)) {
    $msg['message'] = 'Please enter a message';
}

然后在您的 HTML 部分,在每个相关输入字段下方,您可以添加:

<div class="form-group">
    <label for="name">Name</label> 
    <input type="text" name="name" class="form-control" value="<?php echo isset($_POST['name']) ? $name : ''; ?>">
    
    <?php if(isset($msg['name'])): ?>
       <p> <?php echo $msg['name']; ?>
    <?php endif; ?>
</div>

但是,总的来说,我不得不说这是一种非常老派的使用方式 PHP,您会将逻辑代码与显示代码混合在一起。

掌握了它的窍门后,也许您想研究 Laravel、Symfony 甚至 CodeIgniter 的工作原理,在那里您可以使用所谓的 MVC 将显示与逻辑分开。

同样,您最终可以使用像 Blade 或类似的模板引擎来回显您的变量。

您可以使用 $msg 变量作为数组而不是字符串来保存特定字段的错误。

<?php
    $msg = [];
    
    if(filter_has_var(INPUT_POST,'submit')){
        //...

        // Check Required Fields
        if(!empty($email) && !empty($name) && !empty($message)){
  
            if(filter_var($email, FILTER_VALIDATE_EMAIL) === false ){
                $msg['email'] = [
                    'msg' => 'Please use a valid email'
                    'class' => 'alert-danger'
                ];
            } else { 
                //...

                    if(mail($toEmail, $subject, $body, $headers)){
                        // Email Sent
                        $msg['default'] = [
                            'msg' => 'Your email has been sent'
                            'class' => 'alert-success'
                         ];
                    } else {
                        // Failed
                        $msg['default'] = [
                            'msg' => 'Your email was not sent'
                            'class' => 'alert-danger'
                         ];
                    }
            }
        } else {
            // Failed
           $msg['default'] = [
                'msg' => 'Please fill in all fields'
                'class' => 'alert-danger'
             ];
        }
    }
?>

现在在 HTML 中,您可以检查特定错误或消息是否存在并将其显示在正确的位置;顶部的默认消息和电子邮件输入下的电子邮件错误:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Contact US</title>
</head>
<body>
     <nav class="navbar">
        <div class="container">
            <div class="navbar-header">
                <a href="index.php" class="navbar-brand">My Website</a>
            </div>
        </div>
     </nav>
     <div class="container">

        <!-- HERE -->
         <?php if(isset($msg['default'])): ?>
            <div class="alert <?php echo $msg['default']['class']; ?>"><?php echo $msg['default']['msg']?></div>
         <?php endif; ?>

        <form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post">
            <!-- ... -->

            <div class="form-group">
                <label for="name">Email</label>
                <input type="text" name="email" class="form-control" value="<?php echo isset($_POST['email']) ? $email : ''; ?>">

                <!-- AND HERE -->
                <?php if(isset($msg['email'])): ?>
            <div class="alert <?php echo $msg['email']['class']; ?>"><?php echo $msg['email']['msg']?></div>
         <?php endif; ?>
            </div>

            <!-- ... -->
        </form>
     </div>
</body>
</html>

您实际上也可以对您想要的任何其他输入执行相同的操作。