应使用novalidate属性禁用表单提交时的原生校验拦截，同时通过监听input/blur和submit事件实现自定义实时验证，并可选调用setCustomValidity统一控制验证状态与提示。
在表单提交时，HTML5 的原生校验（如 required、type="email"、pattern）会自动触发并阻止提交，有时与业务逻辑冲突。想绕过它、改用自定义实时验证，关键不是“关闭校验”，而是**禁用浏览器默认行为 + 主动接管验证流程**。novalidate 属性只是让表单提交时不触发生效的原生提示和阻断，但不禁止输入时的伪类（如 :invalid）或 JS 中的 checkValidity() 调用。
1. 正确使用 novalidate 禁用提交时的原生拦截
只需在 <form> 标签上添加 novalidate 属性（布尔属性，无需赋值）：
<form id="myForm" novalidate> <input type="email" name="email" required> <button type="submit">提交</button> </form>
这样点击提交按钮时，浏览器不会弹出“请填写此字段”等提示，也不会阻止表单提交，为 JS 自定义验证腾出空间。
2. 移除原生校验干扰：慎用 required / pattern 等属性
novalidate 只影响提交行为，不影响输入过程中的样式（如红色边框）或 JS 接口返回值。若你完全不想依赖原生规则，建议：
立即学习“前端免费学习笔记（深入）”；
- 删掉
required、minlength、pattern等校验属性——避免视觉干扰和checkValidity()返回意外结果 - 如需保留语义或辅助技术支持，可留着，但 JS 验证逻辑必须完全覆盖，不依赖其返回值
- 用 CSS 重置
:invalid样式（例如input:invalid { box-shadow: none; }），防止用户误以为已有校验
3. 实现业务级实时验证（输入中 + 提交前）
核心是监听用户输入，并调用你的业务规则函数。推荐组合使用：
-
实时反馈：监听
input或blur事件，对当前字段做校验（如邮箱格式、用户名是否已存在） -
提交拦截：监听
submit事件，调用整体校验函数；若失败，e.preventDefault()阻止提交并高亮错误 -
统一状态管理：用对象记录各字段是否通过（如
validState = { email: false, password: true }），提交前汇总判断
示例片段：
const form = document.getElementById('myForm');
form.addEventListener('submit', e => {
if (!validateForm()) {
e.preventDefault(); // 阻止原生提交
}
});
function validateForm() {
const email = form.email.value.trim();
const isValid = email && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
showFeedback(form.email, isValid, isValid ? '' : '邮箱格式不正确');
return isValid;
}
function showFeedback(el, valid, msg) {
el.setCustomValidity(valid ? '' : msg); // 影响 validity.valid 和 reportValidity()
el.nextElementSibling.textContent = msg;
}
4. 可选：用 setCustomValidity 精细控制 validity API
即使用了 novalidate，你仍可通过 input.setCustomValidity(msg) 设置自定义错误信息。这会影响：input.checkValidity()、input.reportValidity() 和 input.validity.valid。好处是：
- 复用浏览器的
reportValidity()显示气泡提示（风格统一） - 便于与第三方库（如 Formik）集成
- 保持
validity对象的语义一致性
注意：传空字符串 '' 表示“无错误”，非空字符串表示“校验失败”。不要混用原生属性和 setCustomValidity，否则行为可能冲突。
不复杂但容易忽略：novalidate 是起点，不是终点；真正可控的验证靠的是主动监听、明确阻断、统一反馈。
