filter必须全局唯一，多个表单共用相同lay-filter会导致事件混淆、逻辑错乱、验证覆盖等问题；正确做法是每个form设置唯一lay-filter值，并在form.on('submit(...)')中严格对应。
form.on('submit(filter)') 的 filter 必须全局唯一
多个表单共存时，如果都用相同的 lay-filter 值（比如全写成 lay-filter="demo"），Layui 的 form.on('submit(demo)') 会把所有匹配的表单提交事件都交给同一个回调处理——哪怕它们结构、字段、逻辑完全不同。这不是“监听错”，而是明确设计：Layui 的事件注册是基于 filter 字符串的全局映射，后注册的同名 filter 会覆盖前一个。
常见错误现象：
- 点击表单 A 的提交按钮，却执行了表单 B 的提交逻辑
- 一个表单提交失败后，另一个表单的按钮也跟着被禁用（因共享了同一 DOM 查询逻辑）
- 验证规则互相污染，比如表单 A 的
lay-verify="required"规则被表单 B 的form.verify()覆盖
正确做法：
- 每个
<form></form>标签必须设置互不相同的lay-filter值，例如lay-filter="user-edit"、lay-filter="role-add" - 对应地，每个
form.on('submit(...)')的参数必须与之严格一致，不能漏引号、不能大小写混用 - 避免用变量拼接 filter 名（如
form.on('submit('+filterName+')')），容易因作用域或异步导致值错乱
不要在多个表单里复用同一份 form.verify 配置
Layui 的 form.verify 是全局注册的验证规则池，不是按表单隔离的。如果你在不同表单初始化逻辑中反复调用 form.verify({xxx})，新规则会直接覆盖旧同名规则——比如两个表单都定义了 username 规则，后加载的那个生效，前一个就失效了。
使用场景：
- 用户管理页含「编辑用户」和「重置密码」两个弹窗表单
- 后台首页有搜索表单 + 批量操作表单 + 导出配置表单
解决方案：
- 统一在页面最顶部（
layui.use内）一次性注册所有验证规则，命名要有业务前缀，如user_username、pwd_old - 各表单 submit 回调内，只调用
form.val('filter-name')取值，再手动做字段级判断，不依赖全局 verify 规则做关键逻辑分支 - 若必须动态规则（如某表单字段是否必填由开关控制），改用
data.field.xxx === ''在 submit 回调里校验，而非注册 verify
DOM 查询必须限定到当前表单作用域
很多开发者在 submit 回调里写 $('button[lay-submit]') 或 document.querySelector('.layui-btn') 来禁用按钮，结果多个表单的按钮全被锁死。这是因为没加表单上下文，jQuery 和原生查询默认扫整个 document。
正确方式是利用 data.form 或 data.elem（Layui 2.8+ 支持）获取当前触发事件的表单 DOM：
form.on('submit(user-edit)', function(data) {
// ✅ 正确：只找当前表单下的提交按钮
var $btn = $(data.form).find('button[lay-submit]');
$btn.prop('disabled', true).text('提交中…');
$.post('/api/user/edit', data.field, function(res) {
layer.msg('成功');
}).always(function() {
$btn.prop('disabled', false).text('提交');
});
});
注意点：
-
data.form是原生 DOM 元素，需用$(...)包裹才能链式调用 - 不要用
$('.layui-form').find(...)，它会匹配所有表单 - 如果用了
layer.open弹窗加载表单，确保弹窗内容是独立 DOM 片段，未被外层表单结构意外包裹
表格内嵌表单要防重复 render 和事件叠加
在 table.render() 的 cols 中用 templet 插入表单（比如每行一个编辑按钮 + 行内表单），是最容易出串扰的场景。每次渲染一行，upload.render() 或 form.render() 若没做条件控制，就会反复执行，导致：
- 同一个按钮绑定 N 次 submit 事件（N = 表格行数）
- 点击任意一行，所有行的表单都提交一次
- 内存泄漏，页面滚动卡顿
根本解法不是“怎么修”，而是“别这么干”：
- 行内操作一律用普通按钮 +
table.on('tool(...)')监听，点击后用layer.open拉起独立弹窗表单 - 真需行内表单，确保
templet返回的是纯 HTML 字符串，且其中lay-filter值带行号动态生成（如lay-filter="edit-row-{{d.LAY_TABLE_INDEX}}"） - 禁止在
templet里调用form.render()或upload.render()；这些应在弹窗打开后、内容注入完成时，由外部 JS 单次调用
最容易被忽略的是：表格翻页后，旧页的事件监听器没清理，新页又叠加一层——这问题不会报错，但会让 submit 回调执行次数随翻页线性增长。
