验证码校验功能异常：提交后空白且JS数据未传至register.php

先梳理下你的核心问题：点击提交按钮后弹出空白提示，怀疑JavaScript没把数据传到register.php，同时发现Session里的验证码和图片显示的内容对不上。下面逐个分析并给出修复方案：

一、空白提示的核心原因：JS未传递submit参数导致PHP逻辑未执行 #

你的register.php入口判断是：

if(!empty($_POST) && isset($_POST['submit'])){

但你的JavaScript代码里，parameters变量完全没包含submit参数，导致这个条件不成立，直接进入else分支返回空白内容，所以alert弹窗显示空白。

修复方法： #

在JS的parameters里补上submit参数（对应表单提交按钮的name和value）：

// 如果还有其他表单字段（比如用户名、密码），记得一起拼接进去
var parameters = "submit=Create+account&txt_Captcha=" + captcha_code;

另外，建议把AJAX请求从同步（第三个参数false）改成异步（true），同步请求会阻塞浏览器，用户体验很差：

ajax.open("POST","register.php",true);

二、验证码Session与图片不符的问题 #

这个问题基本是浏览器缓存了验证码图片导致的：显示的还是旧图片，但Session里已经生成了新的验证码内容。

修复方法： #

给验证码图片的URL添加随机时间戳参数，阻止浏览器缓存：

<img id="captcha_img" src="captcha.php?t=<?php echo time(); ?>" alt="CAPTCHA">

这样每次加载页面或刷新图片时，都会请求新的验证码图片，确保Session中的值和显示的内容一致。

另外，建议把captcha.php中的session_start()移到文件最顶部，避免函数内开启Session可能出现的警告：

<?php
session_start(); // 移到文件开头
create_captcha_img();
function create_captcha_img(){
 // 原函数内容保持不变
}
?>

三、额外优化建议 #

1. 把表单的onclick="send()"改成绑定到onsubmit事件，更符合表单提交的规范：

<form onsubmit="return send()" action="" method="POST" autocomplete="off" id="register_form">
 <!-- 表单内容 -->
 <input type="submit" class="btn btn-block btn-primary" name="submit" role="button" value="Create account" />
</form>

然后修改JS的send函数，最后返回false阻止默认提交行为：

function send(){
 var captcha_code = document.getElementById("txt_Captcha").value;
 if (!captcha_code){ // 补全其他字段的非空判断
 alert("Please fill in all fields")
 return false;
 } else {
 // AJAX请求代码...
 return false;
 }
}

2. 调试时可以在register.php开头打印$_POST，确认参数是否传递成功：

<?php
session_start();
var_dump($_POST); // 查看收到的所有参数
if(!empty($_POST) && isset($_POST['submit'])){
 // 原业务逻辑
}
?>

按照以上步骤修改后，应该就能解决空白提示和验证码不符的问题了。

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