表单脱离<form>后原生校验完全失效，因Constraint Validation API仅绑定于<form>及其后代控件；required不触发、checkValidity()报错、setCustomValidity()无响应，须手动接管状态、事件与UI反馈。
表单不在 <form> 中时，原生校验机制完全失效——required 不触发、checkValidity() 报错、setCustomValidity() 无响应。所有动态校验必须手动接管状态、事件和反馈。
表单脱离 <form> 后 required 和 checkValidity() 为什么失效
浏览器原生验证 API（Constraint Validation API）只绑定在 <form> 元素及其后代可提交控件上。一旦用 <div> 或 <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) 即可。
数组型配置项（如动态表格行）怎么分层校验
表格每行有「状态」下拉框和「评论」输入框，要求选 “Rejected” 时「评论」必填。不能给每行元素设唯一 ID，否则 JS 逻辑随行数爆炸增长：
- 用事件委托：监听表格容器的
change事件，用e.target.closest('tr')定位当前行 - 校验只作用于当前行内字段：
row.querySelector('[name="comment"]')，不扫全表 - 保存时才做全量扫描：遍历所有
tr，对每行调用同一校验函数 - 嵌套结构（如对象数组）拆成两层：外层校验数组长度，内层校验每个对象字段
关键点：动态行的校验入口必须统一走 runValidation()，确保 UI 状态（class="error"、提示文本）和数据状态（dataset.valid）始终同步。
setCustomValidity() 无效时怎么替代气泡提示
setCustomValidity() 在无 <form> 环境下完全静默，且无法控制样式、定位或交互。真实项目中应放弃它：
- 校验失败时，给元素加
class="error"，CSS 控制边框色、背景或图标 - 插入相邻
<span class="hint">显示提示，不要用title属性（不可样式化、焦点不稳） - 错误提示文案要具体：“请输入合法域名”，而非“格式错误”
- 清空错误态时，同时移除
class="error"和dataset.valid，避免残留
最易被忽略的是空格和零宽字符：input.value.trim() === "" 不足以判断“是否真为空”，粘贴进 \u200B 或连续空格时仍会通过。生产环境建议用 input.value.replace(/\s/g, '') === '' 更稳妥。
