使用 justvalidate 进行前端表单验证时，若脚本加载方式不当（如误用 `defer`），会导致验证实例化失败，进而使 `onsuccess` 回调无法触发真实表单提交，造成“验证通过却无后端接收”的假象。
在基于 PHP + MySQL 的注册流程中，前端 JavaScript 验证与后端数据处理需严格协同。你遇到的问题——控制台显示 "Form is valid. Submitting..."，但 MySQL 表中无新增记录——根本原因并非验证逻辑错误，而是 JustValidate 库未正确初始化，导致 onSuccess 回调中的 form.submit() 实际未执行。
? 根本原因：defer 属性破坏脚本执行时序
JustValidate 是一个依赖 DOM 就绪和全局 window 对象的库。当你为引入库的
浏览器会延迟执行该脚本，直到 HTML 解析完成且 DOM 构建完毕。但问题在于：你的自定义验证脚本（/js/validation.js）同样带有 defer，且它在 JustValidate 库加载完成前就尝试访问 window.JustValidate —— 此时构造函数尚未挂载，引发静默失败（控制台可能因未捕获异常而无报错，或仅显示 TypeError: window.JustValidate is not a constructor）。
结果是：validation 实例创建失败 → .onSuccess() 注册无效 → 表单点击提交后，event.preventDefault()（JustValidate 默认行为）阻止了原生提交，而手动 submit() 又未执行 → 表单零提交，后端 PHP 完全收不到请求。
立即学习“Java免费学习笔记（深入）”；
✅ 正确做法：确保库优先加载，移除 defer 干扰
1. 移除 JustValidate 主库的 defer
将库引入改为同步加载（推荐置于
底部或 顶部），确保其在自定义脚本前执行：
⚠️ 注意：若必须将脚本放在 中，请绝对避免对 JustValidate 使用 defer 或 async；否则无法保证执行顺序。
2. 修复 HTML 结构缺陷
原始代码中
和
✅ 正确结构应为：
Signup Register
3. 简洁可靠的验证脚本（validation.js）
// 确保 DOM 加载完成后再初始化
document.addEventListener('DOMContentLoaded', () => {
const validation = new JustValidate('#signup', {
// 可选：关闭默认 submit 阻止，由 onSuccess 显式控制
submitBtnSelector: 'input[type="submit"]',
});
validation
.addField('#username', [{ rule: 'required', errorMessage: '用户名不能为空' }])
.addField('#name', [{ rule: 'required', errorMessage: '姓名不能为空' }])
.addField('#lastname', [{ rule: 'required', errorMessage: '姓氏不能为空' }])
.addField('#password', [
{ rule: 'required', errorMessage: '密码不能为空' },
{ rule: 'password', errorMessage: '密码强度不足' }
])
.addField('#email', [{ rule: 'required', errorMessage: '邮箱不能为空' }]);
validation.onSuccess((form) => {
console.log('✅ 表单验证通过，即将提交...');
// 显式提交（此时 form 是原生 HTMLFormElement）
form.submit();
});
});?️ 后端安全增强建议（PHP）
当前 PHP 插入逻辑存在严重风险：
- 未过滤/转义用户输入（易受 SQL 注入）
- 未哈希密码（明文存储极危险）
- 无重复用户名/邮箱检查
请务必升级为：
if (isset($_POST['createaccount'])) {
$username = trim($_POST['username']);
$name = trim($_POST['name']);
$lastname = trim($_POST['lastname']);
$email = filter_var($_POST['email'], FILTER_SANITIZE_EMAIL);
$password = password_hash($_POST['password'], PASSWORD_ARGON2ID); // 强哈希
// 预处理语句防注入
DB::query('INSERT INTO users (username, name, lastname, password, email, verified, token)
VALUES (:username, :name, :lastname, :password, :email, 0, "")', [
':username' => $username,
':name' => $name,
':lastname' => $lastname,
':password' => $password,
':email' => $email
]);
echo "✅ 注册成功！";
}✅ 总结检查清单
| 项目 | 正确配置 | 常见错误 |
|---|---|---|
| JustValidate 加载 | 同步加载，无 defer/async | 库标签误加 defer |
| 脚本执行时机 | 在 DOMContentLoaded 或 window.onload 后初始化 | DOM 元素未就绪即调用 new JustValidate |
| HTML 结构 | 表单误放 ，或缺失 action/method | |
| 验证回调 | onSuccess 中调用 form.submit()（传入的 form 参数） | 错误使用 document.getElementById(...).submit()（需确保元素存在） |
| 后端防护 | 使用预处理语句 + 密码哈希 + 输入过滤 | 直接拼接 SQL、明文存密码 |
只要修正脚本加载顺序与 HTML 结构，JustValidate 即可无缝衔接 PHP 后端，实现「验证通过 → 表单提交 → 数据入库」的完整闭环。
