异步提交form的时候利用jQuery validate实现表单验证

来源:互联网 发布:sql语句 update 编辑:程序博客网 时间:2024/05/05 22:42

相信很多人都用过jquery validate插件,非常好用,并且可以通过下面的语句来自定义验证规则

    // 电话号码验证       jQuery.validator.addMethod("isPhone", function(value, element) {        var tel = /^(\d{3,4}-?)?\d{7,9}(-?\d{1,4})?$/;           return this.optional(element) || (tel.test(value));       }, "请正确填写您的电话号码");

验证通过,表单提交。但我们常常会碰到这样的需求,当验证通过后,我不需要通过submit form的方式提交表单,我想要更灵活的通过ajax处理表单,加入很多动态的效果,提高客户体验,请看下面的例子:

//有一个表单:<form id="formId" action="">    姓名:<input type="text" name="name">    电话:<input type="text" name="phone">    <input type="button" value="submit" onclick="doSubmit();"></form>//以下是JS:function doSubmit() {        validateForm();//调用验证方法        //do something else... }function validateForm() {        var validator = $("#formId").validate({            meta: "validate",            errorElement: "div",            onfocusout: function(element) {                this.element(element);            },            errorPlacement: function(error, element) {                if (element.is("input") || element.is("textarea")) {                var par = element.parent();                if (par.next().is("div")) {                    par.next().empty();                    error.appendTo(par.next());                } else {                    par.next().next().empty();                    error.appendTo(par.next().next());                }                }            },            success: function(em) {                em.text("ok").addClass("success");//验证通过的动态CSS            },            submitHandler:function() {                 ajaxSubmitForm();            },//这是关键的语句,配置这个参数后表单不会自动提交,验证通过之后会去调用的方法            rules: {                name: {                    required: true,                    maxlength: 100                },                phone: {                    isPhone: true                }            },            messages: {                name: {                    required: "请填写姓名",                    maxlength: "姓名不超过100个字符"                }            }        });    }function ajaxSubmitForm() {        var para = ;//组织参数        var url = "/jajax/saveForm.do";        $.ajax({            type: "post",            cache: false,            dataType: "json",            url: url,            data: para,            beforeSend: function(XMLHttpRequest){                //do something before submit...            },            success: function(data, textStatus){                //do something after submited...            },            complete: function(XMLHttpRequest, textStatus){                //do something in the end...            }        });    }
0 0