加 novalidate 到 form 标签可彻底禁用浏览器原生校验逻辑，而非仅拦截提交；它保留语义属性与交互行为，但要求开发者自行实现 js 校验并确保前后端规则一致。

直接加 novalidate 到 <form></form> 标签上，就能彻底关闭浏览器提交时的原生校验——不是屏蔽提示，是让校验逻辑压根不运行。

为什么不能靠 event.preventDefault() 或 onsubmit="return false"

这两种写法只是“拦住提交”，不是“关掉校验”。问题很实际：

• 屏幕阅读器仍会把 required 字段读作必填，无障碍体验断裂
• 用户聚焦离开 type="email" 输入框时，:invalid 伪类照常触发，样式可能意外变红
• 后续想恢复原生校验？得同时删 JS、补 HTML 属性，维护成本翻倍
• checkValidity() 在 novalidate 下返回 true，但用 preventDefault() 后它仍按规则执行，结果不可控

novalidate 和 formnovalidate 的分工场景

两者都是布尔属性，但作用层级不同：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• novalidate 写在 <form></form> 上，整表单禁用校验；所有 type="submit" 按钮（包括 <button type="submit"></button>）都受控
• formnovalidate 写在某个 <input type="submit"> 或 <button type="submit"></button> 上，仅跳过该按钮的校验，优先级高于 novalidate
• 常见用法：多步骤表单中，“下一步”按钮加 formnovalidate，而最终“确认提交”按钮保持原生校验或走 JS 校验
• 注意：formnovalidate 在 Safari 和 IE9 及更早版本中不支持，如需兼容，统一用 novalidate + JS 控制

加了 novalidate 后，哪些东西依然有效？

这个属性只动“提交拦截”这一环，其他行为照旧：

• required、type="email"、pattern 等属性保留——语义没丢，移动端键盘类型（如邮箱键盘）照常弹出
• input、blur 等事件监听不受影响，FormData 收集数据也完全正常
• setCustomValidity('') 仍可调用，自定义错误状态和 reportValidity() 逻辑照常工作
• :valid/:invalid 伪类在输入过程中持续生效，可用于实时样式反馈

后端校验绝不能省，哪怕加了 novalidate

前端关校验只是为交互让路，不是为安全松绑：

• 恶意用户删掉 novalidate 属性、用 Postman 直接发请求，或禁用 JS，都能绕过一切前端限制
• 后端必须重做完整校验：非空、格式（邮箱正则、手机号长度）、范围（min/max）、业务唯一性（如用户名是否已存在）
• 前后端校验规则尽量一致，否则用户看到的错误提示会割裂——比如前端说“邮箱格式错误”，后端报“非法字符”，体验就断了

最容易被忽略的是：加了 novalidate 后，你得立刻补上 JS 校验逻辑。它不帮你做任何事，只把控制权交还给你——交得干脆，但也意味着责任全在你手上。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！