前端js防止表单重复提交,如果多次点击提交的时间间隔不超过0.5秒,则提交不成功,提交时间间隔为1.5秒则提交成功的代码
时间: 2024-12-17 20:23:06 浏览: 13
前端JavaScript防止表单重复提交通常通过`event.preventDefault()`和计时器(`setTimeout()`)来实现。以下是一个简单的示例代码:
```javascript
// 获取表单元素和提交按钮
const form = document.getElementById('your-form');
const submitButton = document.querySelector('#submit-button');
// 设置一个变量记录上一次提交时间
let lastSubmitTime;
// 添加点击事件监听器
submitButton.addEventListener('click', function(e) {
// 阻止默认提交行为
e.preventDefault();
// 检查是否满足1.5秒的间隔条件
const currentTime = new Date().getTime();
if (lastSubmitTime && currentTime - lastSubmitTime < 1500) { // 1500毫秒等于1.5秒
alert('请等待至少1.5秒再提交!');
} else {
lastSubmitTime = currentTime; // 更新上一次提交时间
// 在这里添加实际的表单提交逻辑
form.submit(); // 或者 form.submitEvent()
}
});
```
在这个例子中,当用户快速点击提交按钮时,会弹出提示阻止提交,并等待1.5秒后再允许再次提交。记得替换`'your-form'`和`'#submit-button'`为你实际的HTML元素ID。
阅读全文