JavaScript 表单验证后如何正确触发表单提交（保留 action 属性）

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

✅ 正确做法是：

立即学习“Java免费学习笔记（深入）”；

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-zu0370-u03ffu1f00-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 仅被加载一次（<script defer> 是安全的），防止多次 addEventListener 导致验证执行多遍。</script>
• 服务端仍需校验：前端验证仅为用户体验优化，绝不可替代服务端（PHP）的数据校验与安全过滤。register_user.php 必须独立验证所有字段、防 sql 注入、xss 等。
• 错误提示可增强体验：可在 validateInputs() 结尾添加 if (!isValid) formRegister.scrollIntoView({ behavior: ‘smooth’ });，自动滚动到首个错误字段。

总结：e.preventDefault() 是控制权移交的起点，而非终点。真正的表单提交流程应由开发者在验证闭环后主动发起——form.submit() 是最轻量、最兼容、最符合语义的方案，完美桥接前端交互与后端处理，让 action 属性重获新生。