防止Layui form表单重复提交的实现方法

作者：巡夜人时间：2026-10-23 10:57:26浏览：626

本文介绍在Layui框架下防止表单重复提交的有效方案。通过在form标签添加lay-filter和onsubmit属性，并在提交按钮事件中调用form.on监听submit事件并返回false，结合AJAX异步请求，可有效避免用户快速点击导致的重复提交问题。

Layui表单重复提交问题背景

在使用Layui作为JavaScript框架进行表单数据提交时，若提交按钮类型为submit，可能会遇到表单数据被重复提交的问题。为避免这种情况，可以采取以下有效措施：

form标签属性配置

在<form>标签内部，添加属性 lay-filter="formConfig" 和 οnsubmit="return false"。这里的“formConfig”是自定义的名称，随后在提交按钮的事件处理函数中进行相应配置：


form.on("submit(formConfig)",function(data){
  return false;
 });

具体实施步骤

具体实施步骤如下：

form表单内部设置

1、在form表单中设置：


   <form class="layui-form" id="addform" name="addform" lay-filter="formConfig" method="post" action="" enctype="multipart/form-data" οnsubmit="return false" > 

   <button type="submit" class="btn btn-primary radius" id="btnSave" >提交</button>

提交按钮事件处理

2、在提交按钮的事件处理中：


 $(function(){
  $("#btnSave").click(function(){
     layui.use('form',function(){
        var form=layui.form;
        form.render();
        form.on("submit(formConfig)",function(data){
        return false;
        });
     });

     $.ajax({

       // to do......

     });

   }）；