Layui默认失焦实时校验，需手动触发批量验证：用button替代submit，调form.val()获取数据，遍历字段调用form.verify规则函数收集错误，用layer.msg汇总提示。
点击提交按钮后才触发所有表单验证并汇总提示
layui 默认是「失去焦点时实时校验」，但业务常需要用户填完全部再统一检查——关键在于拦截默认提交行为，手动调用 form.verify() 并收集所有失败项，而不是依赖 form.on('submit') 的自动校验流程。
真实场景中容易踩的坑：直接在 form.on('submit', ...) 里写验证逻辑，会发现只报第一个错误、或仍触发了部分实时提示；根本原因是 Layui 的内置 submit 监听器会在表单提交时自动执行校验并中断流程，此时你无法干预它的提示方式。
- 必须用原生
button type="button"替代type="submit"，彻底绕过 Layui 自动绑定的 submit 行为 - 手动获取所有表单项（
form.val('your-form-filter')），再逐个调用form.verify()的底层校验函数（它接受字段名和值） - 注意
form.verify()是同步返回undefined或错误信息字符串，不是 Promise，别 await - 汇总提示建议用
layer.msg()拼接多行错误，避免频繁弹窗干扰
如何手动触发每个字段的验证并捕获全部错误
Layui 的 form.verify 方法本身不支持批量校验，但你可以复用它注册的规则函数。核心思路是：遍历表单结构，对每个带 lay-verify 属性的元素，提取其规则名，再调用对应验证函数。
示例逻辑（放在按钮 click 回调里）：
document.getElementById('submitBtn').onclick = function() {
const formData = form.val('demo'); // 获取整个表单数据
const errors = [];
// 假设你知道字段名：username、email、password
if (!form.verify.username || form.verify.username(formData.username) !== true) {
errors.push('用户名格式不正确');
}
if (!form.verify.email || form.verify.email(formData.email) !== true) {
errors.push('邮箱格式不正确');
}
if (!form.verify.password || form.verify.password(formData.password) !== true) {
errors.push('密码不能为空');
}
if (errors.length) {
layer.msg(errors.join('<br>'), { time: 3000, icon: 5 });
return;
}
// 此处提交 Ajax
};
⚠️ 注意：form.verify.xxx 函数接收的是字段值，不是 DOM 元素；若规则依赖 DOM（比如检查 checkbox 是否勾选），需额外传入 $(elem) 上下文——这时建议把验证逻辑抽成独立函数，避免耦合。
为什么不能直接用 form.validate() 或 form.checkData()？
Layui 2.8+ 之前没有公开的 form.validate() 方法；官方 form.checkData() 是内部方法，未暴露文档，且行为不稳定——某些版本返回布尔值，某些版本直接弹窗并中断流程，不可控。
- 不要尝试反射调用
layui.form.prototype.checkData，不同版本签名可能变化 -
form.on('verify')是监听事件，不是校验入口，它只在自动校验触发后回调，无法主动调用 - 强行给 input 触发
blur事件模拟失焦，会导致页面滚动、焦点跳转等副作用，体验差
兼容性与性能提醒
手动遍历字段校验在 IE11 下没问题，但若表单字段超 50 个，每次点击都全量校验可能有轻微卡顿（尤其含正则复杂的规则）。可考虑加节流或仅校验 visibly visible 的字段（用 getBoundingClientRect() 判断是否在视口内）。
更隐蔽的问题：Layui 的日期/颜色/上传等组件不走 lay-verify 流程，它们的值需单独判断（例如 $('#dateInput').val() 是否为空），否则汇总提示会漏掉这些字段。
