必须使用 layui.form.submit('id') 触发提交,否则绕过验证、不触发监听、导致校验失效和后端收不到数据;所有干预逻辑(改值、换 action、加 token、异步检查)必须在 form.on('submit(filter)') 中处理,并手动控制 loading 与请求。
必须用 layui.form.submit('id'),不能调原生 submit()
直接调 document.getelementbyid('myform').submit() 或 $('#myform')[0].submit() 会绕过 layui 的验证逻辑,也不触发 form.on('submit()') 监听,表单看似提交了,但字段没校验、loading 不显示、回调不执行——后端收不到数据或收到空值是常态。
根本原因是 Layui 表单不是原生 <form></form>,而是通过 form.render() 绑定的代理层。所有交互必须走它提供的 API 才能保全流程完整。
- 表单必须已初始化:
layui.use('form', function(){ var form = layui.form; form.render(); }) - 表单需带
lay-submit属性(否则form.on('submit)'不注册) -
layui.form.submit()参数是字符串 id,不是 DOM 节点,也不是 jQuery 对象 - 没传参数时默认提交第一个含
lay-submit的表单,行为不可控,禁止依赖
form.on('submit(filter)') 是唯一可控的修改入口
想动态改字段值、换 action 地址、加 token、做异步前置检查?全得在 form.on('submit(filter)') 回调里做。Layui 提交流程是“触发 → 校验 → 进入监听回调 → 执行提交”,回调就是你最后也是唯一的干预窗口。
- 用
$(this).find('[name="xxx"]').val('new')可实时覆盖字段(注意 DOM 必须已渲染) - 改提交地址:给
data.form元素设新action,如data.form.action = '/api/v2/submit' - 中断提交:直接
return false(比如校验失败或 loading 中) - 异步操作(如先取 token)必须自己控制节奏:
form.submit()不等你,它只发事件;你要用Promise封装请求,在 resolve 后再手动$.ajax()或重触发提交
别用 click() 模拟隐藏按钮提交
有人写 $('#hiddenSubmitBtn').click() 或 document.getElementById('btn').click() 来“曲线救国”,这会导致两个硬伤:
-
lay-submit按钮自带的 loading 状态不同步,用户可能重复点击 - 如果按钮是动态插入的(比如弹窗内),
click()可能因未渲染或未绑定事件而静默失败 - 更隐蔽的问题:某些版本 Layui 在非用户主动触发(如 script 调用 click)时,会跳过部分内部状态更新
真要封装按钮行为,就老实用 form.submit('id') + form.on('submit') 配合,别绕路。
容易被忽略的关键点:form.submit() 不等待异步,也不接管后续
这是最多人栽跟头的地方。你以为写了:
form.submit('myForm');
// 下面这段代码不会等 submit 回调执行完
console.log('我先执行了');
实际上 form.submit('myForm') 立刻返回,然后马上进 form.on('submit'),但这个监听函数里的异步操作(如 $.ajax、await fetch)完全由你负责处理成功/失败、loading 显示/关闭、错误提示——Layui 一概不等、不管、不兜底。
所以如果你要在提交前拿 token,得这样写:
form.on('submit(myFilter)', function(data) {
// 手动加 loading
const loadIndex = layer.load(1);
getToken().then(token => {
$(data.form).find('[name="token"]').val(token);
$.ajax({ url: data.form.action, data: $(data.form).serialize(), ... });
}).catch(() => {
layer.close(loadIndex);
layer.msg('获取 token 失败');
});
return false; // 阻止默认提交,等你手动发请求
});











