可在submit事件中用javascript拦截表单提交并校验，推荐为绑定submit监听器以覆盖所有提交方式；获取表单后调用event.preventdefault()阻断默认行为，再读取input等元素value值进行非空、邮箱、数字范围等校验。
可以在表单的 submit 事件中用 JavaScript 拦截提交，执行校验逻辑；若校验失败，调用 event.preventDefault() 阻止默认提交行为。
绑定校验逻辑到表单提交事件
推荐给 <form></form> 元素添加 submit 事件监听器，而不是给按钮加 click。因为表单可通过回车键提交，submit 事件能覆盖所有触发方式。
- 获取表单元素：用
document.querySelector('form')或getElementById - 监听
submit事件：使用addEventListener('submit', handler) - 在处理函数开头调用
event.preventDefault()，确保先阻断提交，再校验
获取并检查用户输入值
从表单元素（如 input、select、textarea）的 value 属性读取数据，结合业务规则判断是否合法。
- 非空校验：
if (!input.value.trim())（注意去除首尾空格） - 邮箱格式：
/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(input.value) - 数字范围：
Number(input.value) >= 18 && Number(input.value) - 密码确认一致：
password.value === confirm.value
反馈校验结果
校验失败时，应明确提示用户哪里出错，避免只弹窗或静默失败。
- 在对应输入框旁插入提示文字（如
<span class="error">请输入邮箱</span>） - 聚焦首个错误字段：
firstInvalidInput.focus()，方便用户快速修正 - 可配合 CSS 添加红边框、图标等视觉提示（例如设置
input.classList.add('invalid')）
校验通过后允许提交
所有检查都通过，就不用调用 preventDefault()，表单会按原方式提交（跳转或发 Ajax）。
- 如果用传统提交（action + method），什么也不做，浏览器自动提交
- 如果想改用 Ajax 提交，此时可调用
fetch()或XMLHttpRequest，再手动清空或重置表单 - 避免重复提交：校验通过后可临时禁用提交按钮，防止用户连点
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
