novalidate属性用于禁用浏览器原生表单验证，将验证权交由JavaScript控制，支持自定义提示、异步校验及深度UI集成；须添加在form标签上，不可赋值或置于input上。
在HTML5中，novalidate 属性的作用是禁用浏览器原生的表单验证（比如 required、type="email"、pattern 等触发的提示），从而把验证逻辑完全交由 JavaScript 控制。这不是“绕过验证”，而是主动接管——为实现更灵活的交互、自定义错误提示、异步校验（如用户名唯一性）、多步骤验证或与UI框架深度集成打下基础。
一、正确使用 novalidate 属性
只需在 <form> 标签上添加 novalidate（布尔属性，无需赋值）：
<form id="signupForm" novalidate> <input name="email" type="email" required> <input name="password" minlength="8" required> <button type="submit">注册</button> </form>
⚠️ 注意：
- 不要加 novalidate="false" 或 novalidate=""（无效写法）；
- 单独加在 input 上无效，必须作用于 <form>；
- 加了之后，点击提交按钮不会弹出浏览器默认气泡提示，checkValidity() 仍可调用，但不会自动阻断提交。
二、用 JS 实现完整验证流程
禁用原生验证后，需手动监听提交、收集字段、执行规则、反馈结果。推荐结构如下：
-
监听 submit 事件并阻止默认行为：
event.preventDefault()防止页面跳转或刷新； -
逐项调用自定义验证函数：例如
validateEmail(input)、validatePassword(input)； -
统一管理错误状态：给 input 添加
data-invalid="true"或 classis-error，并更新对应<span class="error">的文本； -
聚焦首个错误字段：
firstInvalidInput.focus()，提升可访问性； -
验证通过后才提交：可用
form.submit()（不触发 submit 事件）或fetch()发送数据。
三、支持原生 API 但不依赖其 UI
即便用了 novalidate，你仍可利用 HTML5 表单的验证 API 做底层判断，只是不显示默认 UI：
立即学习“前端免费学习笔记（深入）”；
-
input.checkValidity()：返回布尔值，检查当前字段是否满足required、pattern等约束； -
input.validationMessage：获取浏览器生成的默认错误文案（可用于回退显示）； -
form.reportValidity()：即使有novalidate，该方法仍会触发原生验证并显示提示——所以一般不用它，除非临时调试； - 建议封装一个
getValidationState(input)函数，内部调用checkValidity()，再结合自定义规则（如“密码需含数字和字母”）返回完整结果对象。
四、进阶技巧：动态规则 + 异步校验
JS 全权控制的优势在此凸显：
- 联动验证：例如“确认密码”字段实时比对“新密码”，输入时就标记不一致；
-
防抖异步检查：用户输完邮箱后 300ms 调用 API 检查是否已注册，用
setValidity({ customError: true })和setCustomValidity("该邮箱已被使用")注入错误； -
条件性必填：如勾选“需要发票”后才校验发票抬头字段，JS 中动态增删
required属性并重验； -
无障碍友好：用
aria-invalid="true"和aria-describedby关联错误消息，屏幕阅读器可读取。
不复杂但容易忽略：始终在 JS 验证前清理旧错误状态（清空 class、setCustomValidity('')、隐藏 error 元素），避免残留干扰。验证逻辑与 UI 更新解耦，便于测试和复用。
