17370845950

不能自动触发即时校验；浏览器仅在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，而在于错误时机选择、防抖控制、无障碍传达和样式一致性——这些地方容易被跳过，但用户感知最明显。