重复提交表单是 Web 开发中一个常见的问题，它可能导致数据重复、服务器资源浪费，甚至可能触发安全问题。在这篇博客中，我们将介绍如何使用 Layui 和 JavaScript 防止表单重复提交，无论你是编程初学者还是经验丰富的开发者，都可以轻松掌握这个技巧。
1. 了解问题
在 Web 开发中，当用户点击表单的提交按钮时，通常会发出一个请求到服务器，以提交表单中的数据。然而，在某些情况下，用户可能会意外地多次点击提交按钮，导致发送多个相同的请求。为了避免这种情况，我们需要在前端实现防止表单重复提交的逻辑。
2. 使用 Layui 和 JavaScript 实现防止重复提交
我们可以使用 Layui（一个流行的前端 UI 框架）和 JavaScript 结合来实现防止重复提交的功能。具体步骤如下：
2.1 创建表单
首先，我们需要创建一个简单的 HTML 表单，如下所示：
<form class="layui-form" id="dataForm" lay-filter="dataForm">
<div class="bottom">
<div class="footer">
<button type="button" class="layui-btn" lay-submit="" lay-filter="formYes">确定</button>
<button type="button" class="layui-btn">取消</button>
</div>
</div>
</form>
2.2 禁用提交按钮
为了防止用户在请求过程中多次点击提交按钮，我们可以在表单提交时禁用按钮。这可以通过添加和移除 layui-btn-disabled 类来实现。我们创建一个名为 disableButton 的函数，根据需要禁用或启用按钮。
function disableButton(button, disable) {
if (disable) {
$(button).addClass("layui-btn-disabled");
} else {
$(button).removeClass("layui-btn-disabled");
}
}
2.3 监听表单提交事件
接下来，我们需要监听表单的提交事件。当用户点击提交按钮时，我们首先禁用按钮，然后模拟发送 Ajax 请求。请求完成后，我们再次启用提交按钮。这可以通过使用 Layui 的 form.on('submit(formYes)', ...) 方法来实现。
layui.use(['form'], function () {
var form = layui.form;
form.on('submit(formYes)', function (data) {
// 获取提交按钮
var submitBtn = $('button[lay-submit]');
// 禁用提交按钮
disableButton(submitBtn, true);
// 模拟发送 Ajax 请求
setTimeout(function () {
console.log("提交数据：", data.field);
// 模拟请求成功
layer.msg("提交成功！", {icon: 6, time: 2000});
// 启用提交按钮
disableButton(submitBtn, false);
}, 2000);
return false; // 阻止表单默认提交行为
});
});在上面的示例中，我们首先禁用了提交按钮，然后模拟了一个延迟为 2000 毫秒的 Ajax 请求。请求成功后，我们显示一个提示消息，并重新启用提交按钮。注意，我们使用 `return false;` 阻止了表单的默认提交行为，以便我们可以自定义提交过程。
3. 完整示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prevent Multiple Submissions Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-src/dist/css/layui.css">
<script src="https://cdn.jsdelivr.net/npm/layui-src/dist/layui.all.js"></script>
</head>
<body>
<form class="layui-form" id="dataForm" lay-filter="dataForm">
<div class="bottom">
<div class="footer">
<button type="button" class="layui-btn" lay-submit="" lay-filter="formYes">确定</button>
<button type="button" class="layui-btn">取消</button>
</div>
</div>
</form>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function disableButton(button, disable) {
if (disable) {
$(button).addClass("layui-btn-disabled");
} else {
$(button).removeClass("layui-btn-disabled");
}
}
layui.use(['form'], function () {
var form = layui.form;
form.on('submit(formYes)', function (data) {
var submitBtn = $('button[lay-submit]');
disableButton(submitBtn, true);
setTimeout(function () {
console.log("提交数据：", data.field);
layer.msg("提交成功！", {icon: 6, time: 2000});
disableButton(submitBtn, false);
}, 2000);
return false;
});
});
</script>
</body>
</html>现在，无论是编程新手还是有经验的开发者，都可以轻松地使用 Layui 和 JavaScript 防止表单重复提交。这个技巧可以有效地提高 Web 应用的用户体验，同时减轻服务器的负担。希望本文对你的开发工作有所帮助！