HTML页面防止表单重复提交

情况一：使用ajaxForm提交表单

<form name="frm" id="frm" method="post" action="{:url('edit_apply')}">
	<div class="form-group">
		<label class="col-sm-3 control-label">处理：</label>
		<div class="input-group col-sm-4">
			<label><input type="radio" name="state" value="2" checked /> 通过</label>&nbsp;&nbsp;&nbsp;
			<label><input type="radio" name="state" value="3" /> 拒绝</label>
		</div>
	</div>
	<div class="form-group">
		<label class="col-sm-3 control-label">原因：</label>
		<div class="input-group col-sm-4">
			<textarea class="form-control" name="reason" id="reason" rows="3" style="resize:none;" placeholder="请输入原因"></textarea>
		</div>
	</div>
     <div class="form-group">
		<div class="col-sm-4 col-sm-offset-3">
            <button class="btn btn-primary" type="submit"><i class="fa fa-save"></i> 保存</button>
         </div>
     </div>
</form>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript" src="js/layer.js"></script>
<script type="text/javascript">
	//提交
	$(function(){
        var is_sub = false; //防止重复提交1
        $('#frm').ajaxForm({
            beforeSubmit: checkForm, 
            success: complete, 
            dataType: 'json'
        });
        
        function checkForm(){
            var state = $('input[name=state]:checked').val();
			var reason = $('#reason').val();
            
			if(state==3 && reason==''){
                layer.msg('请输入原因',{icon:2,time:1500,shade: 0.1}, function(index){
					layer.close(index);
                });
                return false;
            }
			
			//防止重复提交2
            if(is_sub){
                return false;
            }
            is_sub = true;
        }

        function complete(data){
            if(data.code==1){
                layer.msg(data.msg, {icon: 6,time:1500,shade: 0.1}, function(index){
                    window.location.reload();
                });
            }else{
                layer.msg(data.msg, {icon: 5,time:1500,shade: 0.1});                
                is_sub = false; //防止重复提交3
                return false;   
            }
        }   
    });
</script>

情况二：普通ajax上传

<div>
	<div class="form-group">
		<label class="col-sm-3 control-label">处理：</label>
		<div class="input-group col-sm-4">
			<label><input type="radio" name="state" value="2" checked /> 通过</label>&nbsp;&nbsp;&nbsp;
			<label><input type="radio" name="state" value="3" /> 拒绝</label>
		</div>
	</div>
	<div class="form-group">
		<label class="col-sm-3 control-label">原因：</label>
		<div class="input-group col-sm-4">
			<textarea class="form-control" name="reason" id="reason" rows="3" style="resize:none;" placeholder="请输入原因"></textarea>
		</div>
	</div>
     <div class="form-group">
		<div class="col-sm-4 col-sm-offset-3">
            <button class="btn_sub" type="button"><i class="fa fa-save"></i> 保存</button>
         </div>
     </div>
</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/layer.js"></script>
<script type="text/javascript">
	//提交
	$(function(){
        var is_sub = false; //防止重复提交1
        $('.btn_sub').click(function(){
            var state = $('input[name=state]:checked').val();
			var reason = $('#reason').val();
			if(state==3 && reason==''){
                layer.msg('请输入原因',{icon:2,time:1500,shade: 0.1}, function(index){
					layer.close(index);
                });
                return false;
            }
			
			//防止重复提交2
			if(is_sub){
                return false;
            }
            is_sub = true;
	
			$.post(
				"{:url('edit_apply')}",
				{state: state,reason: reason},
				function(res){
					if(data.code==1){
		                layer.msg(data.msg, {icon: 6,time:1500,shade: 0.1}, function(index){
		                    window.location.reload();
		                });
		            }else{
		                layer.msg(data.msg, {icon: 5,time:1500,shade: 0.1});                
		                is_sub = false; //防止重复提交3
		                return false;   
		            }
				},
				'json'
			)
        });
    });
</script>

情况三：Validform验证提交表单

<form name="frm" class="form" method="post" action="{:url('edit_apply')}">
	<div class="form-group">
		<label class="col-sm-3 control-label">处理：</label>
		<div class="input-group col-sm-4">
			<label><input type="radio" name="state" value="2" checked /> 通过</label>&nbsp;&nbsp;&nbsp;
			<label><input type="radio" name="state" value="3" /> 拒绝</label>
		</div>
	</div>
	<div class="form-group">
		<label class="col-sm-3 control-label">原因：</label>
		<div class="input-group col-sm-4">
			<textarea class="form-control" name="reason" id="reason" rows="3" style="resize:none;" placeholder="请输入原因"></textarea>
		</div>
	</div>
     <div class="form-group">
		<div class="col-sm-4 col-sm-offset-3">
            <button class="btn btn-primary subBtn" type="submit"><i class="fa fa-save"></i> 保存</button>
         </div>
     </div>
</form>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/layer.js"></script>
<script src="js/Validform_v5.3.2_min.js"></script>
<script type="text/javascript">
$(".form").Validform({
		tiptype:function(msg,o,cssctl){
			if(o.type=='3') layer.msg(msg);
		}
		,ajaxPost:true
		,tipSweep:true
		,postonce:true //为true时，在数据成功提交后，表单将不能再继续提交
		,btnSubmit:'.subBtn'
		,callback:function(data){
			console.log(data);
			if(data.status){
				layer.msg(data.message, {time: 1000}, function(){
					if(data.status == '1'){
						if(data.url){
							window.location.href = data.url;
						}else{
							window.location.reload();
						}
					}
				});
			}
		}
		,datatype:{
			"agree":function(gets,obj,curform,regxp){
				if(obj.prop('checked')==true){
					return true;
				}else{
					return false;
				}
			}
		}
	})
</script>