表单脱离后原生校验完全失效，因constraint validation api仅绑定于及其后代控件；required不触发、checkvalidity()报错、setcustomvalidity()无响应，须手动接管状态、事件与ui反馈。

表单不在 <form></form> 中时，原生校验机制完全失效——required 不触发、checkValidity() 报错、setCustomValidity() 无响应。所有动态校验必须手动接管状态、事件和反馈。

表单脱离

后 required 和 checkValidity() 为什么失效

浏览器原生验证 API（Constraint Validation API）只绑定在 <form></form> 元素及其后代可提交控件上。一旦用 <div> 或 <code><section></section> 包裹输入项，input 就失去表单上下文：

• checkValidity() 方法根本不存在，调用直接抛 TypeError
• required 属性仅影响 submit 行为，不监听 input/change，也不自动标记 :invalid
• reportValidity() 返回 true，哪怕字段为空

这不是 bug，是规范行为。别试图“修复”它，而是换思路：自己维护 dataset.valid 状态。

动态必填字段：用 data-depends-on 实现联动校验

当「启用 HTTPS」开关打开时，「端口」必须为 443/8443；当「自动重连」关闭时，「重试间隔」应跳过校验。这类依赖关系靠硬编码 ID 维护极易断裂，推荐用声明式属性驱动：

• 给目标字段加 data-depends-on="https_enabled"，值为触发字段的 id 或 name
• 在触发字段的 change 事件中，调用统一校验函数 runValidation()
• runValidation() 遍历所有含 data-depends-on 的字段，读取依赖项当前值，按规则重算 dataset.valid
• 避免在 blur 后立刻清错误态——加 300ms 防抖，等用户输完再校

示例：<input type="number" id="port" data-depends-on="use_https">，校验逻辑里判断 use_https.checked && ![443,8443].includes(+port.value) 即可。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

数组型配置项（如动态表格行）怎么分层校验

表格每行有「状态」下拉框和「评论」输入框，要求选 “Rejected” 时「评论」必填。不能给每行元素设唯一 ID，否则 JS 逻辑随行数爆炸增长：

• 用事件委托：监听表格容器的 change 事件，用 e.target.closest('tr') 定位当前行
• 校验只作用于当前行内字段：row.querySelector('[name="comment"]')，不扫全表
• 保存时才做全量扫描：遍历所有 tr，对每行调用同一校验函数
• 嵌套结构（如对象数组）拆成两层：外层校验数组长度，内层校验每个对象字段

关键点：动态行的校验入口必须统一走 runValidation()，确保 UI 状态（class="error"、提示文本）和数据状态（dataset.valid）始终同步。

setCustomValidity() 无效时怎么替代气泡提示

setCustomValidity() 在无 <form></form> 环境下完全静默，且无法控制样式、定位或交互。真实项目中应放弃它：

• 校验失败时，给元素加 class="error"，CSS 控制边框色、背景或图标
• 插入相邻 <span class="hint"></span> 显示提示，不要用 title 属性（不可样式化、焦点不稳）
• 错误提示文案要具体：“请输入合法域名”，而非“格式错误”
• 清空错误态时，同时移除 class="error" 和 dataset.valid，避免残留

最易被忽略的是空格和零宽字符：input.value.trim() === "" 不足以判断“是否真为空”，粘贴进 \u200B 或连续空格时仍会通过。生产环境建议用 input.value.replace(/\s/g, '') === '' 更稳妥。