表单不在<form>中时required和checkValidity()失效，需自行维护验证状态：绑定事件提取data-rule规则、执行校验并存dataset.valid，保存时统一检查；setCustomValidity()无效，改用class和hint提示；联动校验通过data-depends-on建立依赖；数组/嵌套结构采用分层校验，动态行只校验当前项，保存时全量扫描；所有校验入口统一走runValidation函数确保状态同步。
表单不在 <form> 里时，required 和 checkValidity() 会失效
很多组件配置页为了布局灵活，直接用 <div> 包裹输入控件，不套 <form>。这时浏览器原生验证机制就断了——required 属性不会触发校验，checkValidity() 方法根本不存在，调用会报 TypeError: checkValidity is not a function。
解决办法只有一个：自己维护验证状态，别依赖原生表单 API。
- 给每个配置项的
<input>或<select>绑定input或change事件 - 用
this.dataset.rule或this.getAttribute('data-validate')提取预设规则（比如data-rule="required|email"） - 每次触发时，执行对应校验函数，并把结果存到
this.dataset.valid = "true"或"false" - 点击“保存”按钮时，遍历所有配置项，检查是否全为
dataset.valid === "true"
setCustomValidity() 在无 <form> 环境下不起作用
setCustomValidity() 是 HTML5 表单 API 的一部分，它只对 <form> 下的可提交控件有效。如果组件配置区是独立 DOM 片段，调用它不会显示气泡提示，也不会影响 reportValidity() 的行为——后者会直接返回 true，哪怕字段为空。
替代方案是手动控制 UI 反馈：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 校验失败时，给元素加
class="error"，并插入<span class="hint">请输入合法域名</span> - 不要用
title属性模拟提示，它无法精准定位、也不支持样式定制 - 避免在
blur后立刻清空错误提示——用户可能还没输完，应等input停顿 300ms 再校验（防抖）
联动校验：一个配置项变更，如何触发其他字段重验？
常见场景：启用「HTTPS 代理」后，「端口」必须为 443 或 8443；关闭「自动重连」时，「重试间隔」字段应禁用且跳过校验。
关键不是监听单个字段，而是建立字段间依赖关系：
- 用
data-depends-on="proxyEnabled"标记被依赖字段 - 在 proxyEnabled 的
change回调里，调用validateField('port')和validateField('retryInterval') -
validateField()函数统一读取dataset.rule、执行正则或逻辑判断、更新 UI 状态 - 注意清除旧错误：重验前先移除
errorclass 和关联的提示元素，否则多个错误叠加会混乱
配置项含数组或嵌套结构时，校验逻辑怎么组织？
比如「白名单域名列表」是动态增删的 <input> 行，每行要校验格式且不能为空；或者「高级参数」是一个 JSON 字符串输入框，需确保 parse 成功且字段符合 schema。
这类结构不能靠单个 dataset 解决，得用分层校验：
- 外层容器（如
id="whitelist-group"）负责收集所有子项，逐个调用validateInputRow(row) - JSON 字段用
try { JSON.parse(value) }+schema.validate(parsed)（可用ajv等轻量库） - 避免在每次
input时都全量校验整个数组——只校验当前编辑行，保存时再做整体扫描 - 校验失败的行，用
row.classList.add('invalid')标记，比全局弹窗更直观
动态校验真正难的不是写逻辑，而是让错误状态和 UI 更新严格同步——尤其在快速切换、连续输入、异步加载配置的场景下，dataset.valid 容易滞后或错位。建议所有校验入口统一走一个 runValidation(triggerField) 函数，内部处理防抖、依赖触发、状态归并，别散落在各个事件监听里。
