如何实现JavaScript表单验证通过后再将注册数据插入数据库，阻止无效数据提交？

你的核心问题在于JavaScript验证函数在验证失败时没有返回false，导致即使弹出警告框，表单还是会继续提交给PHP处理。另外，前端验证可以被绕过（比如用户禁用JavaScript），后端也需要做完整的校验，同时你的PHP代码存在严重的SQL注入风险，这些都得一起修复。

1. 修复JavaScript验证函数 #

修改你的validateFormRec函数，确保每一个验证失败的分支都返回false，这样才能阻止表单的默认提交行为：

function validateFormRec(){
    var n = document.forms["myForm"]["Name"].value;
    var e = document.forms["myForm"]["Number"].value;
    var p = document.forms["myForm"]["Password"].value;

    if (n == "" || e == "" || p == "" ) {
        alert("One or more fields are empty! ");
        return false;
    } else {
        // 手机号验证规则
        var phoneno = /^\d{12}$/;
        if( !(e.startsWith("966")) ){
            alert("The Number must start with 966");
            return false; // 新增：验证失败时阻止提交
        } else if(!(e.match(phoneno)) ){
            alert("The number must contain 12 digits");
            return false; // 新增：验证失败时阻止提交
        } else {
            return true; // 所有验证通过，允许提交
        }
    }
}

2. 增强PHP后端的验证与安全性 #

前端验证只能做用户体验优化，不能依赖它来阻止无效数据。后端必须重新做一次完整校验，同时要修复SQL注入漏洞（你当前的代码直接把用户输入拼到SQL语句里，非常危险）：

<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
session_start();

$dbhost = "localhost";
$dbuser = "root";
$dbpass = "root";
$dbname = "yummydonations";

$con = mysqli_connect($dbhost,$dbuser,$dbpass,$dbname);
if(!$con) {
    die("failed to connect!");
}

if($_SERVER['REQUEST_METHOD'] == "POST") {
    $RecipientName = trim($_POST['Name']);
    $Number = trim($_POST['Number']);
    $password = trim($_POST['Password']);

    // 后端验证：和前端保持一致的规则
    $errors = [];
    if(empty($RecipientName) || empty($Number) || empty($password)){
        $errors[] = "One or more fields are empty!";
    }
    if(is_numeric($RecipientName)){
        $errors[] = "Name cannot be numeric!";
    }
    if(!str_starts_with($Number, "966") || !preg_match('/^\d{12}$/', $Number)){
        $errors[] = "Mobile number must start with 966 and be exactly 12 digits!";
    }

    if(empty($errors)){
        // 使用预处理语句防止SQL注入
        $Recipient_id = random_int(0, 500);
        $query = "INSERT INTO recipient (id, name, password, mobile) VALUES (?, ?, ?, ?)";
        $stmt = mysqli_prepare($con, $query);
        mysqli_stmt_bind_param($stmt, "isss", $Recipient_id, $RecipientName, $password, $Number);
        mysqli_stmt_execute($stmt);
        
        header("location:RecpPH.php");
        die();
    } else {
        // 显示所有错误信息
        foreach($errors as $error){
            echo "<p style='color:red; margin:10px 0;'>$error</p>";
        }
    }
}
?>

3. 确认表单的提交绑定 #

你的表单已经正确设置了onsubmit="return validateFormRec()"，这个属性会根据函数的返回值决定是否提交表单，只要函数在验证失败时返回false，就能阻止提交。

这样修改后，只有当JS验证全部通过，且后端二次校验也通过时，数据才会被插入数据库，彻底解决你遇到的问题。

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