JavaScript表单验证用于前端实时校验输入，提升用户体验，但必须配合后端验证以保障数据安全；前后端需各自独立校验，且规则应保持一致。
JavaScript 表单验证主要在用户提交前检查输入是否符合要求，比如邮箱格式、必填项、密码强度等，能即时反馈、提升体验，但不能替代后端验证——因为前端逻辑可被绕过，数据仍可能被篡改或直接发送到服务器。
前端验证：用 JavaScript 实时拦截问题
核心是监听表单事件（如 input、blur、submit），结合正则、条件判断和 DOM 操作给出提示。
- 用
addEventListener('submit', e => { e.preventDefault(); ... })拦截提交，手动校验后再决定是否真正提交 - 对单个字段常用
blur（失焦）触发校验，配合setCustomValidity()和reportValidity()复用浏览器原生提示 - 校验逻辑建议封装成独立函数，例如
isValidEmail(str)或isPasswordStrong(pwd)，便于复用和测试 - 错误提示尽量插入到对应输入框附近（如后面加
<span class="error">邮箱格式不正确</span>），而非仅用alert
后端验证：服务端必须重新校验所有数据
无论前端是否验证、是否被禁用或绕过，后端收到请求后都应独立执行完整校验。这是保障数据安全与系统稳定的第一道防线。
- 校验内容需与前端一致（如邮箱正则、长度限制、唯一性检查），但实现语言和方式不同（如 Node.js 用
joi，PHP 用filter_var） - 涉及数据库的约束（如用户名是否已存在）只能在后端完成，前端最多做“实时用户名可用性检测”（本质是发 AJAX 请求查接口）
- 后端校验失败应返回明确的结构化错误（如
{ "email": ["邮箱已被注册"] }），前端据此定位并展示错误 - 敏感操作（如修改密码、转账）还需额外校验权限、会话有效性、防重放等，这些完全不在前端控制范围内
前后端验证不是二选一，而是分层防御
前端验证的目标是用户体验：减少无效请求、快速反馈、降低服务器压力；后端验证的目标是数据可信：确保入库/执行的数据真实、合法、安全。
立即学习“Java免费学习笔记（深入）”；
- 不要在前端“省事”而跳过某项校验，指望后端兜底——这会让用户反复提交失败，体验差
- 也不要因前端做了校验，就在后端“信任”数据而跳过关键检查——这是严重安全隐患
- 推荐做法：前后端共用同一套校验规则描述（如 JSON Schema），通过工具生成双方代码，保证逻辑一致
不复杂但容易忽略：验证只是起点，配套的错误展示、用户引导、无障碍支持（如 aria-invalid）、以及错误恢复机制（如自动聚焦首个错误字段），同样重要。
