HTML5原生校验不提供错误日志对象，但可通过checkValidity()、validity和validationMessage等属性手动提取结构化错误信息；validity为ValidityState对象，含valueMissing、typeMismatch等布尔字段，配合validationMessage可获默认提示；批量收集时遍历form.elements，仅处理willValidate为true的元素，提取首个为true的validity键作为code，并可映射为业务语义如"required"、"format"；在submit事件中preventDefault后执行校验收集，生成完整错误日志用于展示、上报或调试。
HTML5 原生校验（如 required、type="email"、pattern、minlength 等）本身不提供错误日志对象，但可通过 JavaScript 结合 checkValidity() 和 validationMessage、validity 等属性，手动提取并结构化每个字段的校验状态与错误原因。
获取单个表单控件的结构化错误信息
每个表单元素（<input>、<select></select>、<textarea></textarea>）都拥有 validity 属性，它是一个 ValidityState 对象，包含多个布尔字段（如 valueMissing、typeMismatch、patternMismatch、tooShort 等），可精准定位失败类型。配合 validationMessage 可获得浏览器默认提示文本。
示例：提取一个邮箱输入框的结构化错误
const input = document.querySelector('input[type="email"]');<br>if (!input.checkValidity()) {<br> const error = {<br> field: input.name || input.id,<br> type: input.type,<br> validity: { ...input.validity }, // 浅拷贝布尔状态<br> message: input.validationMessage,<br> value: input.value<br> };<br> console.log(error);<br>}
批量收集整个表单的错误日志
遍历表单内所有可校验元素（form.elements），跳过禁用或无校验属性的项，对每个触发 checkValidity() 并记录结果。注意：checkValidity() 会触发伪类 :invalid，但不会自动弹出提示框。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 只收集
willValidate === true的元素（即有校验属性且未被disabled或readonly） - 对每个无效字段，提取
validity中为true的键名作为错误码（如"valueMissing"、"typeMismatch"） - 建议统一返回数组，每项含
field、code（首个 true 错误码）、message、value
增强可读性：映射 validity 错误码为业务语义
原生 ValidityState 的属性名（如 badInput、rangeOverflow）偏底层。可在收集时做一层映射，转换为更易理解的错误类型：
-
valueMissing→"required" -
typeMismatch→"format"（配合type="email"或type="url"） -
patternMismatch→"pattern" -
tooShort/tooLong→"length" -
rangeUnderflow/rangeOverflow→"range"
这样生成的日志更利于前端统一展示、埋点上报或后端协同调试。
与 submit 事件结合，阻止默认提交并输出完整日志
在表单 submit 事件中调用 event.preventDefault()，再执行校验收集逻辑。这是生成完整错误日志最自然的时机——用户已尝试提交，所有字段均已触发校验。
form.addEventListener('submit', (e) => {<br> e.preventDefault();<br> const errors = [];<br> for (const el of form.elements) {<br> if (!el.willValidate) continue;<br> if (!el.checkValidity()) {<br> const code = Object.keys(el.validity)<br> .find(key => el.validity[key]);<br> errors.push({<br> field: el.name,<br> code: code || 'unknown',<br> message: el.validationMessage,<br> value: el.value<br> });<br> }<br> }<br> console.log('Validation log:', errors);<br> // 后续可渲染错误提示、上报 Sentry、触发 analytics 等<br>});
