Layui 如何手动触发表单验证

问题背景

在 Layui 当中，我们正常会使用 form.on 的方式来监听表单提交，点击提交按钮，他会自动完成相应的表单校验，如果校验通过，就会执行回调函数；如果不通过就会出现下图中的出现的情况，标红给提示。

form.on('submit(demo1)', function(data){
    var field = data.field; // 获取表单字段值
    layer.alert(JSON.stringify(field), {
        title: '当前填写的字段值'
    });
    return false; // 阻止默认 form 跳转
});

但是现在有需求，在 Layui 进行表单校验之前要做一些检查。问题就来了，现代化的前端组件，例如 Antd、ElementUI ，都会提供表单组件以及全套的 Api ，执行完自己的逻辑再手工触发表单校验是很简单的事情。但是 Layui 没怎么提供手动触发校验的 API ，高版本 2.7 以上 form.validate(elem) 还可以一战。

解决方法

最朴素的做法，就是抛弃 Layui 的表单验证，自己去收集表单项然后挨个验证给 alert ，要求不高的话也不是不能用。

网上的操作比较多的是直接修改 Layui 源码，以提供相关支持。可以是可以，但是感觉不太干净，尤其是给别人的系统改 bug 的时候。

其他的方法，目前我能想到的是增加一个影子按钮，把 lay-submit 安他身上，并设置 display: none，然后设置另一个按钮的点击事件，在事件里面 trigger click 影子按钮。

<button id="shadowBtn" style="display: none" type="submit" class="layui-btn" lay-submit lay-filter="demo1">影子按钮</button>
<button onclick="submitFunc()">提交</button>

function submitFunc() {
    // 这里是自己的逻辑
    $('#shadowBtn').trigger('click') // 触发表单提交
}

form.on('submit(demo1)', function(data){
    var field = data.field; // 获取表单字段值
    layer.alert(JSON.stringify(field), {
        title: '当前填写的字段值'
    });
    return false;
});