layui 多个form表单只提交一个

可以使用 layui 的表单提交监听函数来实现多个表单只提交一个的效果。

首先，给每个需要提交的表单设置一个唯一的 id，然后在页面加载完成后，使用 layui 的 form.on() 方法监听表单提交事件，当任意一个表单提交时，获取该表单的数据并存储到一个全局变量中，然后阻止表单提交。当最后一个表单提交时，将存储的所有表单数据合并，然后使用 ajax 提交数据并清空存储的数据。

示例代码如下：

HTML：

<!-- 表单1 -->
<form class="layui-form" id="form1">
  <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-block">
      <input type="text" name="username" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-block">
      <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="form1">提交</button>
    </div>
  </div>
</form>

<!-- 表单2 -->
<form class="layui-form" id="form2">
  <div class="layui-form-item">
    <label class="layui-form-label">姓名</label>
    <div class="layui-input-block">
      <input type="text" name="name" required  lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">年龄</label>
    <div class="layui-input-block">
      <input type="number" name="age" required lay-verify="required" placeholder="请输入年龄" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="form2">提交</button>
    </div>
  </div>
</form>

JavaScript：

// 定义一个全局变量，用于存储所有表单数据
var formData = {};

// 监听表单提交事件
layui.form.on('submit', function(data){
  // 获取表单 id 和数据
  var id = data.form.attr('id');
  var data = data.field;
  
  // 将数据存储到全局变量中
  formData[id] = data;
  
  // 如果不是最后一个表单提交，则阻止表单提交
  if (Object.keys(formData).length < 2) {
    return false;
  }
  
  // 合并所有表单数据
  var allData = {};
  for (var key in formData) {
    allData = Object.assign(allData, formData[key]);
  }
  
  // 使用 ajax 提交数据
  $.ajax({
    url: 'http://example.com/submit',
    type: 'POST',
    data: allData,
    success: function(){
      // 清空全局变量
      formData = {};
      
      // 提示用户提交成功
      layer.msg('提交成功');
    },
    error: function(){
      // 提示用户提交失败
      layer.msg('提交失败，请重试');
    }
  });
});

在上面的代码中，我们使用了 Object.keys() 方法来获取 formData 对象中属性的数量，然后判断当前提交的表单是否为最后一个表单。如果不是最后一个表单，则阻止表单提交。最后一个表单提交时，我们使用 Object.assign() 方法将所有表单数据合并为一个对象，然后使用 ajax 提交数据。在提交成功或失败后，我们清空 formData 对象并提示用户。