如何通过onsubmit实现表单入库前验证，避免alert后页面刷新？

核心问题说明 #

• 混淆了前端JS和服务端PHP的运行环境：JS运行在用户浏览器，无法直接调用PHP的数据库操作函数、执行SQL语句，你写在JS里的mysqli相关代码全部无效。
• 前端校验函数存在基础语法错误：JS没有内置empty()函数，变量名前后不一致（比如定义了mail、numGSM，判断时用了不存在的adresseMail、numeroGSM）。
• 原有服务端验证的刷新问题，是因为默认表单提交会触发页面重载，要实现无刷新需要用AJAX异步提交表单。

完整修改方案 #

第一步：前端代码调整（HTML+JS） #

保留原有页面结构，仅修改校验函数和表单提交逻辑，前端仅做基础格式校验：

function valide_GSM() {
    var prenom = document.getElementById("txtPrenom").value.trim();
    var nom = document.getElementById("txtNom").value.trim();
    var adresseMail = document.getElementById("txtAdresseMail").value.trim();
    var numGSM = document.getElementById("txtGSM").value.trim();
    var identifiant = document.getElementById("txtIdentifiant").value.trim();
    var motDePasse = document.getElementById("txtMotDePasse").value.trim();

    // 非空校验
    if (!prenom || !nom || !adresseMail || !numGSM || !identifiant || !motDePasse) {
        alert("请填写所有输入框");
        return false;
    }
    // 手机号格式校验
    if (isNaN(numGSM) || numGSM.length <7) {
        alert("手机号无效，必须为数字且不少于7位");
        document.getElementById("txtGSM").focus();
        return false;
    }

    // 基础校验通过，用AJAX异步提交给后端处理，避免页面刷新
    $.post({
        url: window.location.href,
        data: {
            txtPrenom: prenom,
            txtNom: nom,
            txtAdresseMail: adresseMail,
            txtGSM: numGSM,
            txtIdentifiant: identifiant,
            txtMotDePasse: motDePasse
        },
        dataType: 'json',
        success: function(res) {
            if (res.code == 0) {
                alert(res.msg);
                location.href = "../index.php";
            } else {
                alert(res.msg);
            }
        }
    });

    // 阻止表单默认提交行为，避免页面刷新
    return false;
}

第二步：服务端PHP代码调整 #

把原来的POST处理逻辑修改为返回JSON格式，去掉原有alert、alertHeader这类会输出内容导致AJAX解析失败的函数：

<?php 
session_start();
include("connection.php");
include("fonctions.php");

// 处理AJAX POST请求
if($_SERVER['REQUEST_METHOD'] == "POST") {
    // 统一返回格式
    $result = [
        'code' => 1,
        'msg' => ''
    ];

    // 接收参数并做转义
    $prenom = mysqli_real_escape_string($con, $_POST['txtPrenom']);
    $nom = mysqli_real_escape_string($con, $_POST['txtNom']);
    $adresseMail = mysqli_real_escape_string($con, $_POST['txtAdresseMail']);
    $numeroGSM = mysqli_real_escape_string($con, $_POST['txtGSM']);
    $identifiant = mysqli_real_escape_string($con, $_POST['txtIdentifiant']);
    $motDePasse = mysqli_real_escape_string($con, $_POST['txtMotDePasse']);
    $refClient = random_num(20);
    $invite = 0;

    // 后端二次校验（避免前端校验被绕过）
    if (empty($prenom) || empty($nom) || empty($adresseMail) || empty($numeroGSM) || empty($identifiant) || empty($motDePasse)) {
        $result['msg'] = '请填写所有字段';
        echo json_encode($result);
        exit;
    }
    if (!is_numeric($numeroGSM) || strlen($numeroGSM) <7) {
        $result['msg'] = '手机号无效';
        echo json_encode($result);
        exit;
    }
    // 校验用户名是否存在
    $identifiantPresent = "SELECT identifiant FROM tblclient where identifiant = '" . $identifiant . "' ";
    $res = mysqli_query($con, $identifiantPresent);
    if (mysqli_num_rows($res) > 0) {
        $result['msg'] = '用户名已存在';
        echo json_encode($result);
        exit;
    }
    // 写入数据库
    $query = "insert into tblclient(refClient,prenom,nom,adresseMail,numeroGSM,identifiant,motDePasse,invite) values ('$refClient','$prenom','$nom','$adresseMail','$numeroGSM','$identifiant','$motDePasse','$invite')";
    if (mysqli_query($con, $query)) {
        $result['code'] = 0;
        $result['msg'] = '账户创建成功';
    } else {
        $result['msg'] = '注册失败，请稍后重试';
    }
    echo json_encode($result);
    exit;
}
?>

注意事项 #

• 前端校验仅作优化体验用，后端必须做二次校验，防止有人绕过前端直接请求接口提交非法数据。
• 密码不要明文存储到数据库，建议用password_hash()函数加密后再入库。
• 可以用预处理语句替代mysqli_real_escape_string做SQL注入防护，安全性更高。

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