jquery.form 异步提交表单

1.引入js
jquery.form.min.js
2.实例
在前端页面里加上class=”required” 就能在提交表单是 进行验证

<input name="amt" id="amt" type="number"  htmlEscape="false" maxlength="50" class="required"/>
<span class="help-inline"><font color="red">*</font> </span> //验证错误提示

var options3 = {
            focusCleanup:true,focusInvalid:false,
            errorClass: "unchecked",
            validClass: "checked",
            errorElement: "span",
            errorPlacement:function(error,element){
            var s = element.parent().find("span[htmlFor='" + element.attr("id") + "']");
                if(s!=null){
                    s.remove();
                }
                error.appendTo(element.parent());
            },
            success: function(label) {

                label.removeClass("unchecked").addClass("checked");
            },
            rules:{
            //验证规则 如果需要自定义的规则 则使用$.validator.addMethod 下面单独拿来讲

            }
        };

        function showResponse3(responseText, statusText) {
                loader.hide();
                //  responseText 后台返回的json格式数据都封装在此处    success result 都是在后台自己命名
                if(responseText.success){   
                $.jBox.tip(responseText.result)

                }else{

                $.jBox.error(responseText.result)

                }
        }

        function showRequest3(formData,jqForm,options){
            return $("#表单id").valid();
        }

        var validator = null;
        $(document).ready(function(){
            validator = $("#表单id").validate(options3);
            $("#reset").click(function(){
                validator.resetForm();
            });

            $("button").click(function(){
                validator.form();
            });

            $("#表单id").submit(function(){                               
                $(this).ajaxSubmit({
                    type:"post",//提交方式
                    url: “”“”,//路径
                    beforeSubmit:showRequest3,//此处提交表单时对form里的数据进行封装
                    beforeSend:function(){
                        console.log("正在进行，请稍候");
                        loader.show();//
                    },
                    success:showResponse3 //成功时调用的函数
                });
                setTimeout("$('#btnSubmit').removeAttr('disabled')",3000);
                return false; //此处必须返回false，阻止常规的form提交
            });
        });

3.自定义表单验证–jquery validator addMethod的使用

 "af"为名称 自己命名 使用例子：rules:{
                    koulv:{af['20']}// koulv为input里的name  af 为调用验证的函数 20为参数 如果需要输入多个参数 则为[10,20,30]

            }

value 为当前元素本身的值 如 ： value则为10，
element 为当前元素
params 传入的参数 如上面传入的20

只能返回true 和false
“请填写提现扣率” 为 如果为 false 则会提示 请填写提现扣率

$.validator.addMethod("af",function(value,element,params){  
    if(params[0]==1){
        return false;
    }
    if(params[0]==0){
        return true;
    }
    },"请填写提现扣率");

4 请求后台controller
记得要写上produces =”application/json;charset=utf-8” 不然返回前端时 前端会拿不到数据

    @RequestMapping(value = "save",produces ="application/json;charset=utf-8")
    @ResponseBody
    public String save(){
    }