input事件无法覆盖自动填充，需同时监听input、change和animationend事件；必填字段校验应批量提取并用checkValidity()与trim()统一判断；disabled按钮不跳过HTML5校验，仅novalidate或formnovalidate可绕过；实时校验须手动调checkValidity()或reportValidity()。
input事件监听不能覆盖自动填充场景
只绑 input 事件会导致 Chrome/Edge 自动填充后按钮仍禁用、Safari 延迟触发校验失败。浏览器 autofill 几乎不发 input，只发 change，甚至带 animationend 动画帧。
必须同时监听三类事件：
-
input：捕获键盘输入、粘贴、拖放 -
change：兜底 autofill 和失焦变更 -
animationend（可选）：监听 autofill 触发的隐藏动画，尤其对type="email"或type="tel"字段更稳定
别写 el.oninput = handler，会覆盖已有监听器；统一用 addEventListener。
多个required字段别手写 && 判断
逐个写 field1.value && field2.value && field3.value 不仅难维护，还漏掉空格判断——用户输一串空格，value 非空但实际无效。
立即学习“前端免费学习笔记（深入）”；
推荐批量提取 + 统一校验：
- 用
Array.from(form.querySelectorAll('[required]'))获取全部必填控件 - 用
.every(el => el.checkValidity() && el.value.trim())一次性判断 - 对
type="email"等字段，优先调el.checkValidity()，它比正则更准，且兼容浏览器内置规则
checkValidity() 返回 false 时字段会自动高亮红边框——这是浏览器原生反馈，不是 bug。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
disabled按钮不会跳过HTML5校验
把提交按钮设为 disabled，不代表表单跳过校验。浏览器的校验发生在表单级，和按钮是否可用无关：JS 调用 form.submit() 仍会触发校验；哪怕按钮 disabled，只要它是 type="submit"，点击行为本身已进入校验流程。
真正合法跳过校验只有两种方式：
- 给
<form></form>加novalidate属性：全局禁用，适合全 JS 校验场景 - 给某个提交按钮加
formnovalidate属性：仅该按钮跳过，适合“暂存”“草稿”等非最终提交操作
二者都不影响 checkValidity() 调用，只是让浏览器不弹窗、不阻断提交流。
实时校验必须手动调用 checkValidity() 或 reportValidity()
原生 HTML5 校验默认只在 submit 时触发，对 JS 赋值、粘贴、空值容忍等场景完全不敏感。想在输入时就反馈，必须手动干预。
关键 API 用法差异：
-
element.checkValidity()：只返回布尔值，不弹提示，适合做状态判断 -
element.reportValidity()：触发浏览器默认气泡提示（但 Firefox 不自动滚动到错误字段） -
element.setCustomValidity("错误文案")：设自定义提示；清空必须传空字符串setCustomValidity("")，否则旧错误残留
pattern 只对 type="text"、"email"、"url" 等生效，对 type="number" 完全无效；type="email" 校验极宽松，真要严格格式，得换 type="text" + pattern + title。
