Layui表单验证提示如何实现在点击提交按钮后才一次性汇总弹出-Layui教程-PHP中文网

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) 上下文——这时建议把验证逻辑抽成独立函数，避免耦合。