表单验证后如何正确提交（保留action）

根本原因在于：e.preventDefault() 会完全取消表单的原生提交流程，包括 URL 跳转、请求发送、action 和 method 的自动应用。它本身不提供“稍后提交”的能力，开发者必须显式控制提交时机。

✅ 正确做法是：

1. 在 submit 事件中调用 e.preventDefault() 暂停默认行为；
2. 执行完整的验证逻辑（如检查必填项、格式、长度等）；
3. 仅当所有字段验证通过时，调用 form.submit() 方法触发原生提交——此时 action 和 method 将被严格遵循，请求照常发送至 register_user.php。

以下是优化后的 validation.js 关键修改（仅展示核心逻辑，已精简冗余代码并增强健壮性）：

const formRegister = document.getElementById('formRegister');

// 验证函数：返回布尔值，true 表示全部通过
const validateInputs = () => {
    let isValid = true;

    // 辅助函数：统一验证逻辑
    const validateField = (input, validator, errorMsg) => {
        const value = input.value.trim();
        if (!value) {
            setError(input, 'This field is required.');
            isValid = false;
        } else if (!validator(value)) {
            setError(input, errorMsg);
            isValid = false;
        } else {
            setSuccess(input);
        }
    };

    // 姓名/姓氏：纯字母（支持空格和常见连字符）
    const nameRegex = /^[A-Za-z\u0370-\u03ff\u1f00-\u1fff\-\s]+$/;
    validateField(document.getElementById('name'), v => nameRegex.test(v), 'Please enter a valid name.');
    validateField(document.getElementById('surename'), v => nameRegex.test(v), 'Please enter a valid surname.');

    // AMKA：11位数字
    const amkaRegex = /^\d{11}$/;
    validateField(document.getElementById('amka'), v => amkaRegex.test(v), 'AMKA must be exactly 11 digits.');

    // AFM & PID：类似规则（略，结构一致）
    const afmRegex = /^\d{9}$/;
    validateField(document.getElementById('afm'), v => afmRegex.test(v), 'AFM must be exactly 9 digits.');

    const pidRegex = /^\d{8}$/;
    validateField(document.getElementById('pid'), v => pidRegex.test(v), 'PID must be exactly 8 digits.');

    // 年龄：1–120 的整数
    validateField(document.getElementById('age'), v => /^\d+$/.test(v) && parseInt(v) >= 1 && parseInt(v) <= 120, 'Age must be between 1 and 120.');

    // 手机号：10位数字
    const phoneRegex = /^\d{10}$/;
    validateField(document.getElementById('mphone'), v => phoneRegex.test(v), 'Mobile phone must be 10 digits.');

    // 下拉框：必须选择非空值
    const dropdown = document.getElementById('dropdown');
    if (!dropdown.value) {
        setError(dropdown, 'Please select a role.');
        isValid = false;
    } else {
        setSuccess(dropdown);
    }

    // 邮箱：使用标准正则
    const emailRegex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    const email = document.getElementById('email');
    if (email.value.trim() && !emailRegex.test(email.value.trim().toLowerCase())) {
        setError(email, 'Please enter a valid email address.');
        isValid = false;
    } else if (email.value.trim()) {
        setSuccess(email);
    }

    return isValid;
};

// 提交事件处理器
formRegister.addEventListener('submit', e => {
    e.preventDefault(); // 阻止默认提交，以便验证

    if (validateInputs()) {
        // ✅ 验证通过：手动触发原生提交 → action="register_user.php" 生效
        formRegister.submit();
    }
});

⚠️ 关键注意事项：

• 不要使用 fetch() 或 XMLHttpRequest 替代 form.submit()：除非你明确要实现无刷新提交（AJAX），否则这将绕过 action，需自行处理请求地址、方法、数据序列化及重定向逻辑，大幅增加复杂度。
• 避免重复绑定事件：确保 validation.js 仅被加载一次（