表单的重复提交是指用户连续多次点击表单按钮，导致系统多次执行了提交操作。表单提交操作防止重置提交是一件非常重要的事。如果不做处理，将导致非常严重的后果。

表单的提交本身是一件非常复杂的事情，除了防止重复提交之外，还得对内容进行检查，这里使用的是jquery validationEngine。

为了得到较好的使用体验，且为了防止用户使用“后退”导致系统重复操作，尽量使用Ajax来进行提交操作。

下面演示实际开发的例子：

HTML代码：

<form id="createForm" action="" method="POST" enctype="multipart/form-data" class="form-horizontal" role="form">

满多少：<input type="text" name="mj_man" placeholder="" class="col-xs-10 col-sm-5 validate[required,custom[integer]]" />
减多少：<input type="text" name="mj_jian" placeholder="" class="col-xs-10 col-sm-5 validate[required,custom[integer]]" />
<button class="btn btn-info aSubmit" type="button">
<i class="icon-ok bigger-110"></i> 提交
</button>

</form>


JS代码：

<script>
$(function () {  

    //新增
    var isSubmitting = false;
    $(".aSubmit").on('click',function(){
            
        //处理状态
        if(isSubmitting){
            return;
        }else{
            isSubmitting = true;
        }
        
        if($('#createForm').validationEngine('validate')){
            
            var f = document.getElementById("createForm");
            data="mj_man="+encodeURIComponent($.trim(f.mj_man.value));
            data+="&mj_jian="+encodeURIComponent($.trim(f.mj_jian.value));
            
            $.post("{:U('Admin/Shop/shopYouhuiManjianCreate')}",
                data,
                function(data,status,xhr){
                    if(data.status == 0){
                        layer.msg('操作成功', {time:1000}, function(){
                            window.location.href = '{:U('Admin/Shop/shopYouhuiManjianList')}';
                        });
                        
                    }else{
                        //处理状态
                        isSubmitting = false;
                        
                        layer.msg('操作失败，错误：'+data.info);
                    }
                }
            );
        }else{
            //处理状态
            isSubmitting = false;
        }
    })
    
});
</script>

关于Ajax提交表单时防止重复提交，本文就介绍这么多，希望对您有所帮助！