novalidate 用于禁用浏览器默认表单验证，不提供自定义验证功能；需手动监听 submit 事件、调用 preventdefault() 并实现完整校验逻辑，包括错误提示、异步校验及多字段联动。
novalidate 是用来关掉浏览器默认验证的
加了 novalidate 属性，<form></form> 就不会触发 required、type="email" 这些原生校验，也不会显示红框或弹提示。这不是“自定义验证”的开关，而是“禁用默认验证”的开关——想自定义，得自己写 JS 检查逻辑，不能指望它帮你做任何校验。
自定义验证必须手动监听 submit 事件
浏览器跳过默认校验后，表单提交会直接触发 submit 事件，你得在这个事件里做所有检查。常见错误是只监听 click 在按钮上，漏掉回车提交、form.submit() 调用等场景。
- 必须用
event.preventDefault()阻止真实提交，否则页面刷新或跳转会打断你的逻辑 - 校验失败时，建议给对应
<input>加class="error"并调用setCustomValidity("错误信息")，这样后续调用checkValidity()才能返回false - 别依赖
validity.valid判断——它只反映原生规则（比如required），novalidate下基本没用；应直接检查值、正则、API 返回等业务逻辑
setCustomValidity 和 reportValidity 的配合容易搞混
setCustomValidity 不会自动触发 UI 提示，只是设置一个字符串状态；reportValidity() 才真正触发浏览器原生气泡提示（但受 novalidate 影响——加了它，reportValidity() 也无效）。所以真要提示用户，得自己写 DOM 提示，或者不用 novalidate，改用 setCustomValidity + reportValidity() 组合（此时不能加 novalidate）。
- 如果坚持用
novalidate，就彻底放弃浏览器提示，全靠 JS 插入<span class="error">xxx</span>或 Toast - 如果想保留部分原生提示（比如邮箱格式），就不要加
novalidate，改用input.addEventListener("invalid", ...)拦截并定制提示 -
setCustomValidity("")表示“通过”，setCustomValidity("不合法")表示“不通过”；空字符串以外的值会让checkValidity()返回false
实际校验逻辑常踩的坑
很多人以为关掉默认验证就万事大吉，结果在后端才发现手机号没校验、密码没确认、邮箱重复注册——前端校验只是体验层，不能替代后端。JS 校验本身也有陷阱：
-
trim()忘了处理空格：" abc@def.com "直接正则匹配会失败，得先.trim() - 手机号用
type="tel"纯属语义，不带任何校验能力，必须自己写正则或调用 API - 异步校验（如用户名是否已存在）不能放在
submit事件同步执行里，得用async/await+event.preventDefault()+ 手动控制提交时机 - 多个字段联动校验（如“结束时间必须大于开始时间”）容易漏判，建议把所有字段值 collect 成对象再统一验证
novalidate 只是起点，不是终点。真正麻烦的是把每个字段的业务规则翻译成 JS 逻辑，并且覆盖所有输入路径——粘贴、拖拽、自动填充、快捷键提交，都得测一遍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
