必须在form.on('submit')回调首行加return false或event.preventDefault()阻止默认提交,再发异步请求,成功后跳转并传参;弹窗内表单需在layer.open的success中绑定监听,且按钮须用lay-submit。

直接在 form.on('submit(...)') 回调末尾加 return false; 就能阻止刷新,这是最简、最稳的解法。但很多人加了还刷,问题不在写法本身,而在 DOM 结构、事件时机或按钮类型上。
为什么 return false; 有时不起作用
常见错误不是没写 return false;,而是它被提前打断或根本没执行到:
- 表单验证失败时,
form.verify抛异常或未正确返回false,导致后续代码(包括return false;)不执行 - 用了
<button>却没设type="button",浏览器仍按type="submit"处理,触发原生 submit 行为 - 表单外层套了
<form>标签,且没加lay-filter,Layui 没接管,原生提交照常发生 - 在弹窗(
layer.open)里用表单,但没给弹窗内容加class="layui-form",Layui 的 form 模块压根没初始化
确保 form.on 正确绑定的三个硬条件
Layui 的 form.on 不是“监听任意 submit”,它只响应带 lay-filter 属性的表单内、由 lay-submit 触发的提交:
- 表单标签必须有
class="layui-form",否则模块不激活 - 提交按钮必须含
lay-submit属性,且其lay-filter值要和form.on第一个参数完全一致(比如form.on('submit(login)')对应lay-filter="login") - 不要用
<input type="submit">或<button>直接提交——改用<button type="button" lay-submit lay-filter="login">,避免浏览器默认行为干扰
AJAX 提交后别漏掉这三件事
阻止刷新只是第一步,真正要稳住页面状态,还得处理后续逻辑:
- 请求发出前,用
$(this).attr('disabled', 'disabled')禁用按钮,防止重复点击(注意:只禁用按钮,别连 input 一起 disable,否则form.verify会跳过校验) - 成功回调里,手动恢复按钮:
$(this).removeAttr('disabled').text('提交');失败回调也得做同样操作,不然按钮永远卡死 - 如果表格或列表依赖该表单数据,记得调用
table.reload('xxx')或element.render()主动刷新局部视图,而不是靠页面重载
最容易被忽略的是:表单在 layer 弹窗里动态生成时,form.on 必须在 layer.open 的 success 回调里注册,否则 DOM 还没挂载,监听就失效了。


















