HTML表单验证默认启用，但需通过submit事件触发checkValidity()才能显示提示；若用JS提交或preventDefault()则需手动校验，Safari对minlength、pattern等支持较差，disabled字段不参与验证。
HTML 表单验证默认就开着，不用“开启”
浏览器原生表单验证（比如 required、type="email"、minlength）在绝大多数现代浏览器里是默认启用的，不需要手动开关。你写上校验属性，用户提交时就会触发——但前提是表单用的是 <form> 提交，不是 JS 手动调用 submit() 或阻止了默认行为。
常见错误现象：required 字段空着也能提交；点击按钮没弹提示；type="email" 不拦非法格式。根本原因往往不是“没开验证”，而是：
- 表单里用了
event.preventDefault()却没手动调用checkValidity() - 提交靠
button onclick="doSubmit()"，绕过了原生提交流程 - 用了
input但没包在<form>里，或用了<div>模拟表单
怎么让验证真正生效：submit 事件 + checkValidity() 配合
如果你用 JS 控制提交逻辑（比如发 AJAX），必须显式检查有效性，否则浏览器不会弹出提示，也不会阻止提交。
正确做法是监听 submit 事件，在里面调用 form.checkValidity()，它返回 false 时会自动触发 UI 提示（如红色边框、气泡文字），且默认行为（跳转/刷新）会被阻止：
立即学习“前端免费学习笔记（深入）”；
document.querySelector('form').addEventListener('submit', function(e) {
if (!e.target.checkValidity()) {
e.preventDefault(); // 确保不跳转
return;
}
// 这里可以发 AJAX
});
注意：checkValidity() 只校验，不显示提示；提示是浏览器在 submit 默认行为被触发时才渲染的。所以别用 click 监听按钮然后直接 checkValidity() —— 那不会弹气泡。
兼容性差的点：Safari 对某些属性支持滞后
minlength、pattern 的提示文案在 Safari（尤其是 iOS 15 及更早）里经常不显示，只高亮输入框；setCustomValidity() 设的错误消息在 Safari 中可能被忽略，除非紧接着调用 reportValidity()。
关键差异：
-
reportValidity()强制触发 UI 提示，所有浏览器都支持（IE 不行，但 IE 已死） -
setCustomValidity('')清空自定义错误后，必须再调一次checkValidity()或reportValidity()才能恢复原生校验状态 - Safari 不支持
:valid/:invalid在input上的即时样式更新，需配合input事件手动 toggle class
容易被忽略的细节：disabled 字段不参与验证
带 disabled 属性的 <input> 不会被 checkValidity() 检查，也不会出现在 form.elements 的验证队列里。这很合理，但容易误判：比如你动态禁用某个必填项，结果整个表单突然变“合法”了。
如果需要保留字段但跳过校验，用 readonly 替代 disabled；如果真要排除某字段，改用 formnovalidate 属性在按钮上，而不是禁用输入框。
另外：hidden 字段、display: none 元素、visibility: hidden 元素，只要没加 disabled，依然参与验证——这点常被低估。
