关键是在invalid事件捕获阶段阻止默认气泡并设自定义提示，submit中调用reportValidity()统一校验，输入时清空setCustomValidity以重置状态，统一绑定form submit事件而非内联处理。
要在表单提交时拦截并处理浏览器原生的默认错误气泡，关键不是“关掉它再重写”，而是接管验证流程的时机和方式：用 invalid 事件在气泡弹出前拦截，配合 setCustomValidity() 定制提示，并在 submit 事件中统一控制是否真正提交。
用 invalid 事件提前拦截默认气泡
浏览器在字段验证失败、即将显示原生气泡前，会同步触发 invalid 事件。这是唯一能“抢在气泡出现前”干预的机会：
- 必须使用捕获阶段监听（第三个参数设为
true），确保最早响应 - 第一时间调用
e.preventDefault()，阻止默认气泡弹出 - 根据字段状态设置自定义错误信息：
e.target.setCustomValidity("手机号不能为空") - 示例：，在事件里读取
dataset.blank动态赋值
submit 事件中必须手动触发校验
仅加 preventDefault() 不等于做了校验——它只是卡住提交，但不会检查字段是否合法：
- 第一行必须是
e.preventDefault()，无条件、同步执行 - 紧接着调用
form.checkValidity()或form.reportValidity() -
reportValidity()会主动触发所有字段的invalid事件，并显示你设好的自定义提示（前提是前面已正确设置） - 如果返回
false，说明有字段未通过，此时不发请求；若为true，才进入后续逻辑（如 fetch 提交）
清除错误状态要清空 setCustomValidity
用户修改输入后，错误提示不能一直挂着，需主动恢复有效状态：
- 每次输入变化（
input或blur时），对当前字段调用input.setCustomValidity("") - 再调一次
input.checkValidity()，让:invalid伪类及时移除、样式复位 - 避免只改值却不重置验证状态，否则即使内容合法，样式仍显示为红色或提示残留
不推荐依赖 onsubmit 内联写法或按钮 click
这些方式无法覆盖所有提交路径（比如回车、JS 调用 form.submit()）：
- 统一绑定到
form.addEventListener('submit', ...)，一劳永逸 - 不要写
onsubmit="return false"或onclick="return validate()"，语义弱且难维护 - 动态插入的表单，可用事件委托：
document.addEventListener('submit', e => { if (e.target.matches('form.custom-validate')) {...} })
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
