在使用 Layui 开发表单提交功能时，许多开发者会遇到一个经典难题：明明在回调函数中写了 layer.msg 提示，页面却直接刷新，消息框始终无法弹出。经过反复排查，绝大多数情况都指向同一个根本原因。
form.on('submit()') 里不弹 layer.msg 是什么问题
最核心的原因只有一个：没有阻止表单的默认提交行为。浏览器一旦检测到你在监听按钮的同时，表单也被提交了，它就会自动执行默认提交动作。页面发生跳转或刷新后，layer.msg() 根本没有机会被执行。
需要明确一点：Layui 的 form.on 仅仅是一个监听事件，它并不是拦截器。你是否阻止默认行为，浏览器不会帮你判断。
因此，务必在回调函数的第一行编写 e.preventDefault()（其中 e 为事件参数），以此阻止浏览器的默认提交行为。使用 return false 同样可以达到效果，但从语义清晰度和标准性来看，e.preventDefault() 是更好的选择。
此外，还有几个关键细节需要特别留意：
- 确认
layer模块已正确加载。 Layui 2.8 及以上版本默认内置该模块，但旧版本需要手动检查是否调用过layui.use('layer')。模块未加载，提示自然无法生效。 layer.msg()的放置位置务必准确。 如果采用 AJAX 提交，消息提示必须放在success回调内部，绝不能写在form.on的外层。如果写在外部，意味着请求尚未返回就执行弹窗，自然看不到提示。- 避免在同一个 success 回调中连续多次调用
layer.msg()。 尤其在 iOS Safari 浏览器上，多次堆叠很容易导致提示失效，甚至完全不显示。
iframe 弹窗中怎么取子页面表单数据并提交
接下来讨论 iframe 弹窗的常见场景。不少开发者通过 layer.open 打开一个 iframe 类型的弹窗后，发现子页面的 DOM 元素根本无法直接获取。这很正常，因为子页面运行在独立的 JavaScript 上下文中，直接使用 $('#form') 必然取不到。
推荐的常规处理方式如下：
- 使用
top.layer.getChildFrame('body', index)—— 这是官方推荐的做法，兼容性最佳。通过该方法可以拿到子页面的body对象，再基于它来查找表单元素。 - 序列化表单： 获取 body 后，调用
var formParam = body.find('#myForm').serialize();，就能将整个表单数据一次性序列化，便于提交。 - 获取单个字段： 也可以使用
body.find('#username').val()这样的方式获取特定字段的值。前提是该 ID 在子页面中确实存在且没有重复。 - 尽量避免直接使用
form.submit()提交。 该方法没有返回值，后续流程难以控制，比如提交后需要关闭弹窗、刷新父页表格，容易导致时机混乱。
提交成功后关闭弹窗并刷新父页表格
这是一个非常典型的场景：编辑或新增完成后，需要关闭弹窗，同时刷新父页面的表格数据。关键在于获取当前弹窗的索引，并通知父页面重新加载数据。
一个常见的坑：直接使用 parent.location.reload()。这种做法会粗暴地刷新整个父页面，导致用户已设定的筛选条件和当前页码全部丢失，体验很差。正确的做法是优先使用 table.reload() 实现精准刷新：
- 打开弹窗时记录索引：
var index = layer.open({ ... });这个index就是当前弹窗的唯一标识。 - 提交成功后先关闭弹窗： 使用
layer.close(index);即可。 - 接着刷新表格： 使用
parent.layui.table.reload('yourTableId', { where: { status: 'active' } });来刷新。这样既能保留表格的当前配置，又能带入你需要的筛选条件（例如只显示“启用”状态的用户）。 - 更稳健的索引获取方式： 如果子页面是 iframe 类型，推荐使用
parent.layer.getFrameIndex(window.name)来获取索引，比手动存储变量更加安全可靠。
为什么关闭按钮点击后表单会意外提交
不少开发者曾踩过这个陷阱：点击“取消”按钮，结果表单却被提交了。这并非 Layui 的 bug，而是 HTML 的默认行为：没有声明 type 属性的 元素，浏览器一律视同为 type="submit"。
这意味着，如果在弹窗中放置了“保存”和“取消”两个按钮，而“取消”按钮没有写 type 属性，点击它时就会触发整个表单的 submit 事件。
解决办法非常简单：
- 显式声明
type属性： 例如。这样它就只是一个普通按钮，不会触发提交。 - 不要指望浏览器猜测你的意图： 浏览器不会查看 CSS 类名，也不会读取按钮的文本内容，它只认
type这个硬性属性。 - 充分利用
lay-submit： 这个 Layui 属性只应添加给真正需要提交的按钮。其他按钮（如取消、重置等）一律显式设置type="button"。
真正令人头疼的不是弹窗能否关闭，而是那个没有写 type 的按钮。它不会在调试时给出任何错误提示，只会在用户点击“取消”时，默默提交一次空数据。排查起来，简直令人头大。
