不能自动触发即时校验；浏览器仅在submit或调用checkValidity()时执行原生校验，需手动监听input/blur事件并配合setCustomValidity()、reportValidity()及CSS类实现即时反馈。
input 的 required 和 pattern 能触发即时校验吗？
不能自动触发。浏览器只在表单提交（submit）或显式调用 checkValidity() 时才执行原生校验，input 失去焦点（blur）或键入时默认不校验——即使加了 required 或 pattern。
想“即时”，必须手动监听事件并调用校验逻辑：
-
input事件适合实时反馈（每输一个字符都校验），但要注意性能和用户体验，比如邮箱格式校验可延迟防抖 -
blur事件更常用：用户离开输入框时校验，平衡及时性与干扰度 - 避免用
keyup：会拦截组合键（如中文输入法上屏）、导致误判
如何用 setCustomValidity() 控制错误提示？
setCustomValidity() 是关键，它覆盖原生错误消息。空字符串表示“校验通过”，非空字符串则标记为无效并显示该文本。
注意几个易错点：
立即学习“前端免费学习笔记（深入）”；
- 每次校验前必须先调用
setCustomValidity('')清除旧状态，否则后续checkValidity()会始终返回false - 错误文案不要带句号，浏览器会自动补全（如显示 “Please fill out this field.”）
- 仅设置
setCustomValidity()不会自动弹出气泡，需配合reportValidity()或提交触发
const emailInput = document.querySelector('#email');
emailInput.addEventListener('blur', () => {
const value = emailInput.value.trim();
emailInput.setCustomValidity(''); // 必须先清空
if (!value) {
emailInput.setCustomValidity('邮箱不能为空');
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
emailInput.setCustomValidity('请输入有效的邮箱地址');
}
});怎样让错误样式和提示真正“即时可见”？
原生校验只在提交或 reportValidity() 时激活伪类 :invalid 和气泡提示。要实现输入中实时视觉反馈，得结合 JS + CSS：
- 监听
input或blur，根据checkValidity()结果动态增删自定义 class（如is-invalid） - 用
:invalid:not(:placeholder-shown)CSS 规则可捕获已输入但不合法的状态，但兼容性有限（IE 不支持） - 不要依赖
validity.valid判断后直接改style.borderColor—— 应统一走 class 控制，便于维护主题和动画
/* CSS 示例 */
input.is-invalid {
border-color: #dc3545;
}
input.is-invalid:focus {
box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}form 的 novalidate 属性有什么影响？
加了 novalidate 就禁用了所有原生校验行为：不触发 invalid 事件、不显示气泡、checkValidity() 仍可用但 submit 不再阻断。
这在需要完全自控校验流程时有用，但要注意：
- 禁用后，
required、minlength等属性仅作语义标记，不再起作用 - 若同时使用自定义校验，务必自己处理提交拦截：
event.preventDefault()+ 手动验证 + 显示错误 - 无障碍支持会弱化：屏幕阅读器可能忽略纯 JS 校验结果，需配合
aria-invalid和aria-describedby
复杂表单里，即时校验的难点不在写几行 JS，而在于错误时机选择、防抖控制、无障碍传达和样式一致性——这些地方容易被跳过，但用户感知最明显。
