需先调用event.preventdefault()阻断原生提交，再异步校验（如api检查用户名），成功后手动form.submit()；手动提交前须显式checkvalidity()，因form.submit()不触发html5校验。
onsubmit 里 preventDefault() 后怎么触发校验并决定是否提交
非同步提交（比如先调用 API 检查用户名是否已存在）必须拦下原生 submit 行为，否则请求发出去就收不回来了。关键不是“要不要弹框”，而是“如何把校验结果映射到提交动作上”。
常见错误是：onsubmit="checkAsync(); return false;"——checkAsync() 是异步函数，return false 直接阻断了所有后续逻辑，API 还没返回，表单已经卡死。
- 必须在事件处理函数开头调用
event.preventDefault() - 校验逻辑（如
fetch()）完成后，根据响应结果手动调用form.submit()或显示错误提示 - 若用
async/await，需确保整个 handler 是async，且event对象在异步回调中仍可访问（推荐用addEventListener而非内联onsubmit）
required 属性在校验流程中是否还起作用
起作用，但只在你没绕过它的时候。只要用户点原生 <button type="submit"></button>，浏览器就会先跑一遍 required、type="email" 等原生校验，失败则连 submit 事件都不会触发。
但一旦你用 form.submit() 手动提交（比如异步校验通过后），这些属性就完全失效了——form.submit() 不触发任何 HTML5 校验，也不会调用 checkValidity()。
- 手动提交前必须显式调用
form.checkValidity()，否则空字段会直通后端 -
form.reportValidity()可主动触发原生错误提示，比自己写 DOM 提示更一致 - 移动端 WebView（尤其旧版微信）可能忽略
required，所以 JS 层校验不能省
服务端收到空值时，前端校验逻辑大概率哪里漏了
不是 JS 没写，而是“空”的定义前后端不一致。比如前端只判 value === ""，而服务端发现传过来的是 " " 或 "\u200B"（零宽空格），或者 <select></select> 的默认项是 <option value="">请选择</option>，用户没动它，前端认为“有值”，服务端认为“未选”。
-
<input type="text">类字段，前端要用value.trim() === "" -
<input type="checkbox">要检查element.checked，而不是看value -
<input type="file">必须检查input.files.length > 0，value字符串不可靠 - 所有校验逻辑应封装成纯函数，和 DOM 解耦，方便复用到服务端或测试
为什么自定义弹窗（SweetAlert）里点“确定”后表单没反应
因为你在弹窗回调里写了 form.submit()，但此时表单可能已被原生校验拦住，或者你忘了在弹窗前调用 preventDefault()，导致两次 submit 冲突。
iOS Safari 还有个隐藏限制：非用户手势触发的 alert()/confirm() 会被静默拦截，而 SweetAlert 本质也是基于这些 API 封装的，如果它不是在 click 或 submit 回调里直接调用，就可能白屏无响应。
- 确保 SweetAlert 的
then()回调里只做一件事：form.submit()或fetch().then(() => form.submit()) - 避免在
setTimeout或 Promise 链中间层调用弹窗，会丢失用户手势上下文 - 调试时打开 Network 面板，确认请求是否发出；再看 Console 是否报
Blocked opening 'xxx' in a new window
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
