PHP表单提交功能失效求助：含XHR的验证脚本无预期效果

核心问题分析 #

你的代码存在三个关键问题，导致XHR验证逻辑完全失效，表单直接提交：

1. 请求头与数据格式不匹配 #

你手动设置了Content-Type: application/x-www-form-urlencoded，但发送的是FormData对象——FormData会自动生成multipart/form-data类型的请求头，手动设置的头会导致PHP无法正确解析POST数据，最终isset($_POST['register'])始终为false，服务器端验证逻辑根本没执行。

2. 错误信息输出逻辑错误 #

当前PHP在页面渲染阶段输出错误，但XHR请求需要的是纯文本错误响应，而非包含整个表单页面的HTML。错误信息没有被XHR捕获，反而页面直接刷新，看起来像是表单默认提交。

3. XHR响应处理逻辑不完善 #

只要HTTP状态码是200就跳转页面，但PHP成功时返回success，错误时返回的是整个页面内容，这会导致错误场景下也触发跳转，完全不符合预期。

修复后的完整代码 #

<?php
require_once('db.php');
error_reporting(~E_NOTICE);
date_default_timezone_set('Africa/Nairobi');
ini_set('error_log', '/var/log/php_errors.log');

$errMsg = array();

if(isset($_POST['register'])){
    $name = filter_var($_POST['name'], FILTER_SANITIZE_STRING);
    $password = filter_var($_POST['password'], FILTER_SANITIZE_STRING);
    $time=date('y-m-d h:i:s',time());
    $date=date('y-m-d',strtotime('now'));
    
    if (empty($name) || empty($password)) {
        $errMsg[] = "Enter both name and password";
    } else{
        if (strlen($password) < 8 || !preg_match("#[0-9]+#", $password) || !preg_match("#[A-Z]+#", $password) || !preg_match("#[a-z]+#", $password) || !preg_match("#[\W]+#", $password)) {
            $errMsg[]="Password must contain at least 8 characters including uppercase and lowercase letters, numbers, and symbols";
        } else {
            $custom_salt = bin2hex(random_bytes(10));
            $hash = password_hash($password . $custom_salt, PASSWORD_BCRYPT);
            
            if(empty($errMsg)){
                $sth=$db->prepare("INSERT INTO users(name,password,time,date) VALUES(:name,:password,:time,:date)");
                $sth->bindParam(':name', $name, PDO::PARAM_STR);
                $sth->bindParam(':password', $hash, PDO::PARAM_STR);
                $sth->bindParam(':time', $time, PDO::PARAM_STR);
                $sth->bindParam(':date', $date, PDO::PARAM_STR);
                $sth->execute();
                die('success');
            }
        }
    }
    
    // 有错误时输出错误信息并终止脚本
    if(!empty($errMsg)){
        echo implode('<br>', $errMsg);
        die();
    }
}
?>

<!DOCTYPE html>
<html>
<head>
    <title>User Registration</title>
</head>
<body>
    <h2>User Registration Form</h2>
    <?php 
    // 保留页面加载时的错误显示（针对非XHR场景）
    if (!empty($errMsg)) {
        foreach ($errMsg as $msg) {
            echo '<div style="color: red;">' . $msg . '</div>';
        }
    }
    ?>
    <div id="error-message" style="color: red;"></div>

<form id="register-form" action="" method="post">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name"><br><br>
        
        <label for="password">Password:</label>
        <input type="password" id="password" name="password"><br><br>
        
        <input type="submit" name="register" value="Register">
    </form>
    <script>
  const form = document.getElementById('register-form');
  form.addEventListener('submit', function(event) {
    event.preventDefault();
    
    const xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
      if (xhr.readyState === XMLHttpRequest.DONE) {
        const errMsgElement = document.getElementById('error-message');
        // 清空之前的错误信息
        errMsgElement.innerHTML = '';
        
        if (xhr.status === 200) {
          if(xhr.responseText.trim() === 'success'){
            // 仅当返回success时跳转
            window.location.href = 'index.php';
          } else {
            // 显示服务器返回的错误信息
            errMsgElement.innerHTML = xhr.responseText;
          }
        } else {
          errMsgElement.innerHTML = '请求失败，请稍后重试';
        }
      }
    };
    xhr.open('POST', form.action);
    // 移除手动设置的Content-Type，让FormData自动处理
    xhr.send(new FormData(form));
  });
</script>

</body>
</html>

关键修改点说明 #

1. 移除错误的请求头：删掉xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')，让FormData自动生成正确的请求头，确保PHP能解析POST数据。
2. 调整PHP错误输出：在isset($_POST['register'])的逻辑末尾，判断如果有错误就echo错误信息并die，确保XHR收到的是纯错误文本。
3. 完善XHR响应处理：判断响应文本是否为success，仅此时跳转页面；否则将响应文本作为错误信息显示到页面上。

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