联系表单：无效邮箱/手机号仍显成功提示，求验证实现方案

问题现状 #

当前联系表单存在以下问题：输入无效邮箱或手机号时，未成功发送邮件却弹出Bootstrap的alert-success提示；同时需要补充邮箱格式验证、手机号数字限制功能，确保仅验证通过后才发送邮件并显示正确提示。

解决方案 #

需要同时在前端做即时验证、后端做安全验证，双重保障数据合法性。

一、前端修改（index.php） #

1. 初始隐藏提示框，避免默认显示
2. 限制手机号仅能输入数字
3. 邮箱输入框使用HTML5原生email类型+正则验证格式
4. 提交表单前先执行前端验证，不通过则直接显示错误提示，阻止请求发送

修改后的完整代码：

<div class="col-md-4 mb-3 mb-md-0" data-aos="fade-left">
    <form id="contactForm" action="contact.php" method="POST">
        <input type="hidden" name="send">
        <!-- 初始隐藏提示框 -->
        <div class="alert alert-success" id="success-message" role="alert" style="display:none">
            邮件已成功发送！
        </div>

        <div class="alert alert-danger" id="error-message" role="alert" style="display:none">
            邮件未发送，因邮箱/手机号无效
        </div>

        <div class="input-group mb-3">
            <span class="input-group-text" id="basic-addon1"><i class="bi bi-person-fill"></i></span>
            <input type="text" id="name" name="name" class="form-control" placeholder="Nom Prénom"
                aria-label="Nom Prénom" aria-describedby="basic-addon2" required>
        </div>
        <!-- 邮箱输入改为type="email" -->
        <div class="input-group mb-3">
            <span class="input-group-text" id="basic-addon1">@</span>
            <input type="email" id="email" name="email" class="form-control" placeholder="Email"
                aria-label="email" aria-describedby="basic-addon1" required>
        </div>
        <!-- 手机号改为type="tel"，添加输入过滤 -->
        <div class="input-group mb-3">
            <span class="input-group-text" id="basic-addon1"><i class="bi bi-telephone-fill"></i></span>
            <input type="tel" id="phone" name="phone" class="form-control" placeholder="Téléphone"
                aria-describedby="basic-addon2" required oninput="this.value = this.value.replace(/[^0-9]/g, '')">
        </div>
        <!-- Message input -->
        <div class="mb-3">
            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"
                placeholder="Decrivez le plus possible votre projet" name="message" required></textarea>
        </div>
        <!-- Form submit button -->
        <div class="d-grid">
            <button class="btn btn-primary btn-lg" name="send" type="submit" id="send-form">Submit</button>
        </div>
    </form>
</div>

<script>
    AOS.init();
    $(document).ready(function(){
        // 表单验证函数
        function validateForm() {
            const email = $('#email').val();
            const phone = $('#phone').val();
            // 邮箱正则验证规则
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            // 手机号验证：仅允许数字
            const phoneRegex = /^[0-9]+$/;

            // 隐藏之前的提示框
            $('#success-message, #error-message').hide();

            // 验证不通过则显示错误提示
            if (!emailRegex.test(email) || !phoneRegex.test(phone)) {
                $('#error-message').show();
                return false;
            }
            return true;
        }

        $('#contactForm').submit(function(e){
            e.preventDefault();
            const $this = $(this);
            const $button = $(this).find('button[type="submit"]').text('Submit...').attr('disabled', 'disabled');

            // 先执行前端验证，不通过直接终止
            if (!validateForm()) {
                $button.text('Submit').removeAttr('disabled');
                return;
            }

            // 验证通过后发送AJAX请求
            $.ajax({
                type: 'POST',
                url: 'contact.php',
                data: $this.serialize(),
                success: function(data){
                    if (data === 'success') {
                        $('#success-message').show();
                        $this[0].reset(); // 重置表单
                    } else {
                        $('#error-message').show();
                    }
                },
                error: function(){
                    $('#error-message').show();
                },
                complete: function(){
                    $button.text('Submit').removeAttr('disabled');
                }
            })
        })
    })
</script>

二、后端修改（contact.php） #

前端验证可被绕过，必须在后端再次验证数据合法性，确保只有合法数据才执行邮件发送逻辑：

1. 使用PHP内置函数验证邮箱格式
2. 用正则验证手机号是否为纯数字
3. 验证不通过时返回错误并设置HTTP状态码，触发前端错误回调
4. 邮件发送失败时也返回错误提示

修改后的完整代码：

<?php

use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;

require 'PHPMailer/src/Exception.php';
require 'PHPMailer/src/PHPMailer.php';
require 'PHPMailer/src/SMTP.php';

if(isset($_POST["send"])){
    $body = $_POST['message'];
    $name = $_POST['name'];
    $phone = $_POST['phone'];
    $email = $_POST['email'];

    // 后端验证：邮箱格式合法性
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        http_response_code(400);
        echo "invalid_email";
        die;
    }

    // 后端验证：手机号仅允许数字（可根据需求调整正则，比如固定长度）
    if (!preg_match('/^[0-9]+$/', $phone)) {
        http_response_code(400);
        echo "invalid_phone";
        die;
    }

    try {
        $mail = new PHPMailer(true);
        
        $mail->isSMTP();
        $mail->Host = 'smtp.gmail.com';
        $mail->SMTPAuth = true;
        $mail->Username = '73.auto.73@gmail.com';
        $mail->Password = 'rlylecrtuvztqosz';
        $mail->SMTPSecure = PHPMailer::ENCRYPTION_SMTPS;
        $mail->Port = 465;      
        $mail->setFrom('73.auto.73@gmail.com');

        $mail->addAddress($email);

        $mail->isHTML(true);

        $mail->Subject = 'Projet web';
        $mail->Body = "Message:" . $body . "<br>Phone number: " . $phone . "<br>Name: " . $name . "<br>Mail: " . $email;

        $mail->send();

        echo "success";
    } catch (Exception $e) {
        // 邮件发送失败时返回错误
        http_response_code(500);
        echo "mail_failed";
    }
    die;
}

功能说明 #

• 手机号输入时自动过滤非数字字符，确保输入内容合规
• 表单提交前前端先做格式验证，不通过立即显示错误提示
• 后端再次验证数据，防止恶意绕过前端验证的请求
• 只有所有验证通过且邮件发送成功时，才显示成功提示；任何环节失败都显示错误提示

内容的提问来源于stack exchange，提问作者xajetin