Semantic UI 表单验证默认不支持动态插入的元素，需在初始化动态组件后，手动将验证规则重新绑定或注入到 Form 模块中，才能确保 empty 等规则正常触发。
semantic ui 表单验证默认不支持动态插入的元素，需在初始化动态组件后，手动将验证规则重新绑定或注入到 form 模块中，才能确保 `empty` 等规则正常触发。
Semantic UI 的 .form() 验证依赖于 DOM 初始化时已存在的元素结构。当通过 JavaScript 动态添加 <select> 或 .ui.dropdown 元素（如本例中的 language2 下拉框）后，即使 HTML 中设置了 name="language2" 且验证配置已声明，Form 模块也不会自动识别该新字段——因为验证器在页面加载时已完成初始化，未监听后续 DOM 变化。
正确做法是在 addDiv() 函数内完成三步关键操作：
- 插入 HTML 结构（含 name="language2" 和必要 class）；
- 初始化 Dropdown：$('.ui.dropdown').dropdown()；
- 显式更新或重绑定验证规则——推荐使用 form('add rule', ...) 方法动态注入规则：
function addDiv() {
// 1. 动态插入下拉框（确保 name 匹配）
const html = `
<div class="field">
<label>Language</label>
<select name="language2" class="ui dropdown">
<option value="">Select language</option>
<option value="en">English</option>
<option value="zh">Chinese</option>
</select>
</div>
`;
$('#dynamicContainer').append(html);
// 2. 初始化新 dropdown
$('.ui.dropdown').dropdown();
// 3. 动态添加验证规则（核心！）
$('#myForm').form('add rule', 'language2', [
{
type: 'empty',
prompt: 'Please select a language'
}
]);
// 可选：触发一次验证以确保规则生效
$('#myForm').form('validate form');
}⚠️ 注意事项：
- add rule 必须在 dropdown() 初始化之后调用，否则 Semantic UI 可能无法关联 name 与 DOM 元素；
- 若表单已启用 on: 'blur' 或 on: 'submit' 验证模式，新增规则会自动生效；若使用 on: 'change'，建议对新 <select> 手动触发一次 change 事件；
- 避免重复调用 form('add rule') 导致规则叠加（可先 form('remove rule', 'language2') 清理）；
- 推荐将表单验证配置封装为函数，在 addDiv() 和页面加载时统一调用，提升可维护性。
总结：Semantic UI 表单验证不是响应式的，动态内容必须“显式注册”。与其依赖初始配置，不如把规则注入作为动态组件初始化流程的强制环节——这是保障验证一致性的最佳实践。
