动态必填需用JavaScript控制required属性增删，监听条件元素变化后实时设置targetInput.required = true/false，结合事件委托、表单原生校验条件及服务端重复校验确保可靠性。
直接加 required 只能静态必填，真要“动态”——比如“选了A才要填B”“表格里某列选‘拒绝’才强制填评论”——必须用 JavaScript 控制 required 属性的增删，不能只靠 HTML。
动态添加/移除 required 属性的核心逻辑
浏览器对 required 的响应是即时的：DOM 上一加或一删，校验状态立刻变化。关键不是监听“值变了”，而是监听“条件变了”——比如另一个字段有值、下拉框选中特定选项、复选框勾上等。
- 用
addEventListener('input')或'change'监听触发条件元素（如name输入框、status下拉框） - 在回调里判断当前是否满足“该字段应必填”的条件
- 满足就
targetInput.required = true，不满足就targetInput.required = false - 注意：不要用
setAttribute('required', '')，它会把值设成空字符串，而布尔属性应直接赋布尔值
表格中同一行内下拉框控制相邻输入框必填
表格多行结构下，不能全局找元素，得精准定位“当前行”的目标输入框。常见错误是绑定事件时用 querySelectorAll 一次性取所有 select，再循环绑，但新增行后新元素没监听器。
- 推荐用事件委托：给
<tbody>绑change，用event.target.closest('tr')找到当前行 - 再用
row.querySelector('input[data-field="comment"]')定位同行的输入框 - 根据
event.target.value判断是否为"Discuss"或"Reject"，再设置commentInput.required - 避免在
onchange="xxx(this)"行内写 JS，不利于维护和复用
动态必填 + 原生提交校验能否共存？
可以，但必须满足原生校验生效的三个硬性条件，否则 required = true 就是摆设：
立即学习“前端免费学习笔记（深入）”；
-
<input>必须在<form>标签内（不能只是视觉上在表单区域） - 提交必须走原生路径：
<button type="submit">或回车，不能event.preventDefault()后调form.submit() -
<form>不能带novalidate属性 - 如果非要用 JS 提交（比如要发 API 再跳转），必须手动调
form.checkValidity()，失败时调form.reportValidity()弹默认提示
容易被忽略的兼容与体验细节
动态必填看似简单，但实际落地时最常卡在这些地方：
- 移动端 iOS Safari 对动态添加的
required响应有延迟，建议在设required = true后，主动触发input.focus()确保可编辑态可见 - 用户刚清空字段时，别立刻标红——用
input:invalid:not(:placeholder-shown)CSS 规则控制样式，避免未输入就高亮 -
required不校验内容合法性（如type="date"输2024-02-30仍算“有值”），若需强校验，得额外监听invalid事件或用setCustomValidity - 后端绝不能信任前端传来的“已校验”状态，所有动态必填逻辑必须在服务端重复实现一次
