jQuery与AJAX实现的注册表单验证正常但提交报错 无法插入新用户到数据库

核心问题 #

• 前端JS语法错误：form_validation.js末尾存在多余的闭合括号});，代码执行异常直接触发AJAX错误告警
• 表单参数丢失：jQuery serialize()方法不会包含submit按钮的参数，导致PHP端isset($_POST["register"])判断不成立，业务逻辑完全不执行
• PHP变量拼写错误：获取密码时将user_password错写为user_pasword，密码变量为空导致插入数据库失败
• PDO绑定语法错误：SELECT查询的bindParam参数名前缺少冒号，参数绑定失败导致查询报错
• 逻辑遗漏：未校验用户名/邮箱是否已存在，可能触发数据库唯一键冲突导致插入失败
• 安全隐患：明文密码直接存入数据库，存在泄露风险

修复代码 #

form_validation.js 修正版 #

$("#form[name='registration']").validate({
    rules: {
        user_name: {
            required: true
        },
        user_email: {
            required: true,
            email: true
        },
        user_password: {
            required: true,
            minlength: 7
        },
        confirmed_password: {
            required: true,
            equalTo: "#user_password"
        }
    },
    messages: {
        user_name: '请输入昵称',
        user_email: {
            required: '请输入邮箱地址',
            email: '请输入合法的邮箱地址',
        },
        user_password: {
            required: '请输入密码',
            minlength: '密码长度最少7位',
        },
        confirmed_password: {
            required: '请确认密码',
            equalTo: '两次输入密码不一致',
        }
    },
    submitHandler: function (form) { 
        $.ajax({
            url:'./user.php',
            type: "post",
            // 补充register参数匹配PHP端判断
            data: $(form).serialize() + '&register=1',
            success: function(res) {
                alert("注册成功");
                console.log(res);
                $("#result").html('提交成功');
            },
            error: function(xhr, err) {
                alert("请求出错");
                // 打印错误信息方便后续调试
                console.log(xhr.responseText, err);
                $("#result").html('提交过程中发生错误');
            }       
        });
    }
});

user.php 修正版 #

<?php
require_once __DIR__ . "./connection.php";

if (isset($_POST["register"]) && isset($_POST['user_name']) && isset($_POST['user_email']) && isset($_POST['user_password']) && isset($_POST['confirmed_password'])) 
{
    $user_name = trim($_POST['user_name']);
    $user_email = trim($_POST['user_email']);
    // 修正字段名拼写错误，同时加密密码存储
    $user_password = password_hash(trim($_POST['user_password']), PASSWORD_DEFAULT);

    $db = new DB_connection(); // 补充实例化语法括号

    $sql = "SELECT * FROM user WHERE user_name = :user_name OR user_email = :user_email";
    $statement = $db->conn->prepare($sql);
    // 补充参数名前的冒号符合PDO绑定规范
    $statement->bindParam(":user_name", $user_name);
    $statement->bindParam(":user_email", $user_email);
    
    if ($statement->execute()) {
        // 新增重复账号校验逻辑
        if($statement->rowCount() > 0) {
            echo "用户名或邮箱已被注册";
            exit;
        }
        $sql =  "INSERT INTO user (user_name, user_pass, user_email) VALUES (:user_name, :user_password, :user_email)"; 

        $stmt = $db->conn->prepare($sql);
        $stmt->bindParam(":user_name", $user_name);
        $stmt->bindParam(":user_password", $user_password);
        $stmt->bindParam(":user_email", $user_email);

        if ($stmt->execute()) {
            echo "新用户注册成功";
        } else {
            // 打印SQL错误方便调试
            print_r($stmt->errorInfo());
            echo "插入数据失败";
        }
    } else {
        print_r($statement->errorInfo());
        echo "查询账号信息失败";
    }
}

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