layui一个简单的防止页面重复提交的方法

Posted 2020-11-17 NoctisYang

基本思路是：点击提交按钮后弹出遮罩层，防止多次点击导致的重复提交。

1 <div class="layui-form-item">
2 <div class="layui-input-block t-c" >
3 <input id="file-submit" class="layui-btn" lay-submit lay-filter="demo1" value="提交"
4 type="button"/>
5 </div>
6 </div>

 

 1 <script>
 2     
 3         layui.use([ ‘form‘, ‘jquery‘, ‘layer‘,‘upload‘], function() {
 4             var form = layui.form
 5             , $ = layui.jquery
 6             , layer = layui.layer;
 7             var upload = layui.upload;
 8             var lock = false;
 9 
10             form.on(‘submit(demo1)‘, function(data){
11                 var fileName = document.getElementById("dataFile").value;
12                 if(fileName == null|| fileName == "") {
13                     layer.alert("请选择文件");
14                     return false;
15                 } 
16                 layer.confirm(‘确认提交？‘, {
17                     btn: [‘确认‘, ‘取消‘] 
18                 }, function(index, layero){
19                   //按钮【按钮一】的回调
20                     if(!$(".layui-layer-btn0").hasClass("layui-btn-disabled")){
21                         //$(".layui-layer-btn0")这个是确定按钮
22                         $(".layui-layer-btn0").addClass("layui-btn-disabled");
23                         layer.close(index);
24                         layer.msg(‘处理中...‘,{shade:[0.8, ‘#393D49‘],time:60*60*1000});
25                         
26                         $("form").submit();
27                     }
28                 }, function(index){
29                   //按钮【按钮二】的回调
30                 });
31             });
32         });
33         
34     </script>