动态添加的 input 必须调用 form.render() 才能触发校验,否则 lay-verify 属性无效;自定义验证需通过 item.name 正则匹配实现通用规则;删除时须清理 .layui-form-danger 状态并重 render;name 属性必须规范且唯一,否则 form.val() 和提交失效。

动态添加的 input 必须调用 form.render() 才能触发校验
layui 表单模块只在页面加载时扫描一次 DOM,后续 JS 插入的 <input> 即使带 lay-verify 属性也不会自动绑定验证逻辑。不手动重载,校验就完全失效。
- 插入新元素后、用户开始输入前,立即执行
form.render('input')(仅刷新 input 类型)或form.render()(全量重载) - 如果新增的是
<select></select>或开关类组件,需对应调用form.render('select')或form.render('checkbox') - 避免在 DOM 插入前或异步回调(如 AJAX 成功后)才调用 —— 此时用户可能已失焦,校验提示不会弹出
自定义验证规则要靠 item 参数识别动态 name
form.verify 的 key 是静态字符串,无法匹配类似 phone_1、emails[] 这类运行时生成的 name。硬写 form.verify({ 'phone_1': ... }) 既不可维护,也无法覆盖后续新增项。
- 定义通用规则名(如
dynamicEmail),函数体内通过item.name或item.className做正则匹配 - 示例:
dynamicEmail: function(value, item) { if (/^email_\d+$/.test(item.name) && !/^\S+@\S+\.\S+$/.test(value)) return '邮箱格式错误'; } - 确保该规则在
form.verify()调用前已注册,且新增 input 的name属性必须存在(空 name 不参与校验)
删除动态 input 时要清理 layui 的残留状态
直接 $('xxx').remove() 会留下验证失败时生成的 .layui-form-danger 提示节点和 class,提交时仍报错,甚至影响其他字段校验。
- 删除前先清空值:
$(target).val('') - 移除紧邻的提示条:
$(target).next('.layui-form-danger').remove() - 清除父级表单项的错误状态:
$(target).closest('.layui-form-item').removeClass('layui-form-danger') - 若批量操作频繁,可考虑在删除后统一调用
form.render('input')重置视图,比逐个清理更稳妥
name 属性必须规范,否则 form.val() 回填和提交都失效
layui 的 form.val() 和表单提交依赖 name 做字段映射。动态生成的 input 若没设 name,或用了非法字符(如空格、中文、点号),会导致数据丢失或解析异常。
- 数组式命名用
name="items[]",序号式用name="item_2",避免name="item 2"或name="item.2" - 服务端接收时,PHP 会把
items[]自动转为数组,Python Flask 需用request.form.getlist('items[]') - 回填时
form.val('filter', { 'item_1': 'xxx' })要求 name 完全一致,大小写和下划线都不能错











