JavaScript表单验证：确保数据有效性与安全入库的实践指南

<form name="myForm" onsubmit="return validateFormRec(event)">
    <!-- 表单元素 -->
    <div class="container">
        <label>
            <b>Name:</b>
            <input type="text" placeholder="Enter Name" name="Name" />
        </label>

        <label>
            <b>Mobile Number:</b>
            <input type="text" placeholder="ex: 966563929302" name="Number" />
        </label>

        <label>
            <b>Password:</b>
            <input type="password" placeholder="Enter Password" name="Password" />
        </label>

        <input type='submit' value='Sign up' />
    </div>
</form>

function validateFormRec(e) {
    // 1. 阻止默认表单提交行为
    e.preventDefault();

    const form = document.forms.myForm;
    // 获取所有表单元素，排除提交按钮
    const formElements = [...form.elements].filter(el => el.nodeType === 1 && el.type !== 'submit');
    const phoneNumberPattern = /^\d{12}$/; // 12位数字的正则表达式

    let isValid = true; // 验证状态标志

    // 2. 检查所有必填字段是否为空
    for (const element of formElements) {
        if (element.value.trim() === '') {
            alert(`"${element.name}" 字段不能为空！`);
            isValid = false;
            break; // 发现一个空字段后立即停止检查
        }
    }

    // 如果之前有字段为空，则不再进行后续验证
    if (!isValid) {
        return false;
    }

    // 3. 手机号码格式验证
    const mobileNumber = form.Number.value;
    if (!mobileNumber.startsWith("966")) {
        alert("手机号码必须以 '966' 开头");
        isValid = false;
    } else if (!phoneNumberPattern.test(mobileNumber)) {
        alert("手机号码必须包含12位数字");
        isValid = false;
    }

    // 4. 密码长度验证
    const password = form.Password.value;
    if (password.length < 5) {
        alert('密码太短，至少需要5个字符！');
        isValid = false;
    }

    // 5. 根据验证结果决定是否提交表单
    if (isValid) {
        // 如果所有验证通过，则手动提交表单
        // 注意：这里我们保留了PHP的POST方法，所以直接提交即可
        form.submit();
    }

    // 返回最终验证状态（虽然手动提交后此返回值意义不大，但遵循onsubmit规范）
    return isValid;
}

<?php
// ... (数据库连接和错误报告设置) ...

if($_SERVER['REQUEST_METHOD'] == "POST") {

    $RecipientName = $_POST['Name'];
    $Number = $_POST['Number'];
    $password = $_POST['Password'];

    // 服务器端验证：确保所有字段非空且姓名不是数字
    if(!empty($RecipientName) && !empty($Number) && !empty($password) && !is_numeric($RecipientName))
    {
        // ... (生成Recipient_id) ...

        // 2. 增强安全性：使用预处理语句防止SQL注入
        $query = "insert into recipient (id,name,password,mobile) values (?,?,?,?)";

        // 创建预处理语句
        $stmt = mysqli_prepare($con, $query);

        // 绑定参数
        // 'isss' 表示参数类型：i=integer, s=string
        mysqli_stmt_bind_param($stmt, 'isss', $Recipient_id, $RecipientName, $password, $Number);

        // 执行预处理语句
        if (mysqli_stmt_execute($stmt)) {
            header("location:RecpPH.php");
            die();
        } else {
            echo "数据库插入失败: " . mysqli_error($con);
        }

        // 关闭预处理语句
        mysqli_stmt_close($stmt);

    } else {
        echo "请填写所有必填信息，并确保姓名不是纯数字！";
    }
}
?>