PHP注册表单提交失败、innerHTML不更新问题排查求助

• 前端JS逻辑错误：
  1. event.preventDefault()被写在校验逻辑最开头，无论表单校验是否通过，都会直接阻断表单默认POST提交行为，校验通过后也没有手动触发表单提交，点击按钮不会向后端发送任何数据。
  2. 页面加载完成后会直接全局调用thankReg()，此时用户还未输入内容，且调用validateRegForm()时未传入event参数，会触发Cannot read property 'preventDefault' of undefined的JS错误，打断脚本正常执行。
  3. 感谢文案渲染逻辑绑定在页面初始化阶段，而非表单提交成功后触发，永远不会在正确时机执行。
• 后端PHP逻辑错误：
  1. 数据库INSERT语句写在POST请求判断分支外部，无论是GET访问页面、刷新页面还是POST提交，都会执行插入逻辑。刷新页面属于GET请求，此时$firstname、$lastname未被赋值为空值，就会向数据库插入空行。
  2. mysqli_real_escape_string()调用缺失必填的第一个参数（数据库连接实例$conn），转义逻辑不生效，存在SQL注入风险。
  3. 未对POST参数做存在性校验，非POST场景下直接访问$_POST['firstname']等参数会触发PHP未定义索引警告。
  4. 调试用的Connected!输出写在页面最开头，会破坏HTML文档结构。

1. 调整PHP代码逻辑 #

将页面开头的PHP逻辑替换为以下内容，同时调整注册区域的渲染逻辑：

<!DOCTYPE html>
<?php 
$dbServername = "mysite.com";
$dbUsername = "username";
$dbPassword = "12345";
$dbName = "databasename";

$conn = mysqli_connect($dbServername, $dbUsername, $dbPassword, $dbName);
$regSuccess = false;
if(!$conn){
    die("数据库连接失败: " . mysqli_connect_error());
}

// 仅POST请求下处理表单提交
if ($_SERVER["REQUEST_METHOD"] == "POST"){
    // 校验参数是否存在
    if(isset($_POST['firstname'], $_POST['lastname'])){
        // 传入连接参数正确调用转义函数，同时做首尾去空
        $firstname   = mysqli_real_escape_string($conn, trim($_POST['firstname']));
        $lastname    = mysqli_real_escape_string($conn, trim($_POST['lastname']));
        
        // 后端做参数长度校验，不依赖前端校验结果
        if(strlen($firstname) >= 2 && strlen($lastname) >= 2){
            $sql = "INSERT INTO registration (firstname, lastname) VALUES ('$firstname', '$lastname')";
            if(mysqli_query($conn, $sql)){
                $regSuccess = true;
            } else {
                echo "注册失败: " . mysqli_error($conn);
            }
        }
    }
}
?>

将原页面中id为registrationOne的区块替换为以下内容，通过后端状态判断渲染表单还是成功提示：

<div id="registrationOne">
<div class="container">
<?php if($regSuccess): ?>
<div class="row">
<div class="col-md-12">
<h2 class="thankYouReg">感谢注册。<br /><br />请查收邮件获取专属搜索链接开始使用。<br /><br />如果数分钟内未收到邮件，请通过联系页面和我们沟通。</h2>
</div>
</div>
<?php else: ?>
<form name="regForm" method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
<div class="row">
  <div class="col-md-6">
              <label for="firstname">First Name:</label>
              <input name="firstname" id="firstname" type="text" class="form-control" />
            </div>
            <div class="col-md-6">
              <label for="lastname">Last Name:</label>
              <input name="lastname" id="lastname" type="text" class="form-control" />
            </div>

</div>
<button
            name="submitButton"
            type="submit"
            class="btn btn-primary"
            id="registrationTwo"
            >
            Register
          </button>

</form>
<?php endif; ?>
</div>
</div>

2. 调整前端JS逻辑 #

删除原index.js中冗余的thankReg自执行逻辑，将事件绑定改为监听表单submit事件，修正preventDefault的调用位置：

function validateRegForm(event) {
  let first = document.forms["regForm"]["firstname"].value.trim();
  let last = document.forms["regForm"]["lastname"].value.trim();

  if (first.length < 2) {
    alert("名字长度至少为2个字符");
    event.preventDefault();
    return false;
  } else if (last.length < 2) {
    alert("姓氏长度至少为2个字符");
    event.preventDefault();
    return false;
  }
  return true;
}

// 监听表单submit事件，覆盖回车提交、点击按钮提交等所有提交场景
let regForm = document.forms["regForm"];
if(regForm){
  regForm.addEventListener("submit", validateRegForm);
}

• 建议后续将SQL拼接写法改为mysqli预处理语句或PDO预处理语句，从根本上解决SQL注入风险，mysqli_real_escape_string仅作为基础防护手段。
• 生产环境移除所有调试输出（如原来的Connected!提示），避免破坏页面结构或泄露服务器信息。
• 后端必须保留参数校验逻辑，前端校验仅用于提升用户体验，用户可轻易绕过前端JS直接向后端发送请求。

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