表单提交前校验用户邮箱是否已存在的失效问题排查

问题根源 #

1. 后端逻辑不完整：当邮箱不存在时，$exists变量未被赋值，返回的JSON中exists字段为null，前端会误判为false从而直接提交表单。
2. 缺少错误处理：前端未处理AJAX请求失败（如后端报错、网络问题）的场景，导致即使校验出错也会执行提交操作。
3. SQL注入风险：直接将用户输入拼接到SQL语句中，存在安全隐患。

修复代码 #

1. 修正后端kontrolet.php #

<?php
include("baglanti.php");

// 初始化exists变量为false，确保无论何种情况都有返回值
$exists = false;

// 检查是否接收到email参数
if(isset($_POST["email"])){
    $eposta = $_POST["email"];
    
    // 使用预处理语句防止SQL注入
    $query = "SELECT COUNT(*) as count FROM uyehesap WHERE email = ?";
    $stmt = mysqli_prepare($baglan, $query);
    mysqli_stmt_bind_param($stmt, "s", $eposta);
    mysqli_stmt_execute($stmt);
    $result = mysqli_stmt_get_result($stmt);
    
    if($result){
        $row = mysqli_fetch_assoc($result);
        // 当count大于0时，判定邮箱已存在
        $exists = $row['count'] > 0;
    }
}

$response = array("exists" => $exists);
echo json_encode($response);

// 关闭语句和数据库连接
mysqli_stmt_close($stmt);
mysqli_close($baglan);
?>

2. 完善前端JavaScript逻辑 #

<script>
const frm = document.getElementById("login-form");
const messageElement = document.getElementById("email-message");

frm.addEventListener("submit", function(event) {
    event.preventDefault();
    messageElement.innerHTML = ""; // 清空之前的提示信息
    
    const email = document.getElementById("email").value;
    // 先做前端基础校验
    if(!email){
        messageElement.innerHTML = "请输入邮箱地址";
        return;
    }

    const xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            if(xhr.status === 200){
                try {
                    const response = JSON.parse(xhr.responseText);
                    const exists = response.exists;

                    if (exists) {
                        messageElement.innerHTML = "该邮箱已被注册";
                    } else {
                        // 校验通过，提交表单
                        frm.submit();
                    }
                } catch(e){
                    messageElement.innerHTML = "校验失败，请重试";
                }
            } else {
                // 请求失败时提示用户
                messageElement.innerHTML = "网络异常，无法校验邮箱";
            }
        }
    };

    xhr.open("POST", "kontrolet.php", true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send("email=" + encodeURIComponent(email));
});
</script>

额外优化建议 #

• 可以给邮箱输入框绑定input事件，实时触发校验，提升用户体验。
• 前端可添加加载状态（如按钮禁用+加载动画），防止用户重复提交。
• 确保baglanti.php中的数据库连接逻辑稳定，避免因连接失败导致校验失效。

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