jquery Validate 解决表单重复提交

一、说明

问题：使用jquery Validate remote验证表单导致表单数据重复提交

网上解决表单重复提交的方式各式各样，点开一看js，html代码一大坨。于是自己研究了一下。只需要写一个方法就行了。直接贴代码。我这里是某个分类的唯一性验证。

二、代码

1.自定义的方法。

jQuery.validator.addMethod("checkName", function(value, element) {    //用jquery ajax的方法验证电话是不是已存在
    var flag = false;
    $.ajax({
        type:"POST",
        url:'/goodsCategory/checkName',
        async:false, //同步
        data:{"isUpdate":0,"level":1,"name":value},
        success: function(data){
            flag =  data;
        }
    });
    return flag;
}, "");

2.表单提交

function validateUserForm()
{
    $('#form').validate({
        errorElement : 'div',
        errorClass : 'help-block',
        focusInvalid : false,
        ignore : "",
        rules : {
            name : {
                required : true,
                checkName : true,
            },
            orderby : {
                required : true,
                digits : true
            },
        },
        messages : {
            name : {
                required : "该字段不能为空",
                checkName : "该类型已存在",
            },
            orderby : {
                required : "该字段不能为空",
                digits : "该字段只能为数字"
            },
        },
        highlight : function(e) {
            $(e).closest('.form-group').removeClass('has-info').addClass('has-error');
        },
        success : function(e) {
            $(e).closest('.form-group').removeClass('has-error').addClass('has-success');
            $(e).remove();
        },
        errorPlacement : function(error, element) {
            if(element.is('input[type=checkbox]') || element.is('input[type=radio]')) {
                var controls = element.closest('div[class*="col-"]');
                if(controls.find(':checkbox,:radio').length > 1) controls.append(error);
                else error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));
            }
            else if(element.is('.select2')) {
                error.insertAfter(element.siblings('[class*="select2-container"]:eq(0)'));
            }
            else if(element.is('.chosen-select')) {
                error.insertAfter(element.siblings('[class*="chosen-container"]:eq(0)'));
            }
            else error.insertAfter(element.parent());
        },
        submitHandler : function(form) {
            $.ajax({
                url:"/goodsCategory/add",
                data:$('#form').serialize(),
                type:'post',
                async:false,
                dataType:'json',
                success:function (data) {
                    if(data.success){
                        layer.msg('添加成功',{icon:6});
                        loadPage('/goodsCategory/listUI');
                    }else{
                        layer.msg('添加失败,请刷新后重试...',{icon:5});
                    }
                }
            });
        }
    });
}

三、注意点

1.自定义验证方法和提交表单都是用的ajax方式，并且都是同步（即async为false），当然你如果用普通的提交方式就更不会出现重复提交的问题了。

四、总结

网上的很多解决方式不一定是最好的解决方式，自己想一想，试一试，说不定你的方法更简单实用。