jquery.form 异步校验_表单验证插件jQuery formValidator中如何实现ajax异步提交和返回表单结果不跳转页面？...

解决方法：

一般我们要异步提交表单可以使用jquery程序去绑定submit事件阻止表单跳转而异步发送，但是在jQuery formValidator插件对整个表单验证时，我们知道如果有错误项会阻止提交，这说明已经绑定了submit事件，如果我们再去绑定会冲突。

这里我们要用到formValidator插件中对整个表单进行初始化时的意向设定，如下：$.formValidator.initConfig({autotip:true,formid:"myform",onerror:function(msg){},onsuccess:function(){}});

这里有两个参数onerror和onsuccess分别设定了两个匿名函数，分别指在表单提交时有错误时和无错误成功时要执行的代码。

这里我们要用到的是onsuccess属性，指该组校验通过后的回调函数,返回false会阻止表单的提交。所以我们只要在onsuccess:function(){}中return false即可阻止其提交跳转并且在里面可以使用jquery程序来获取表单的各项值通过$.ajax()方法异步传输。

这里要注意的是，我们要$.ajax()中的async:false参数设定来去除请求异步传输而成为同步传输。也就是说我们这里要的是异步的不刷新不跳转页面效果，而请求传输异步而产生的“滞后性”是不能要的，否则请求还没返回后面就return false而阻止了。

代码演示如下：$.formValidator.initConfig({autotip:true,formid:"myform",onerror:function(msg){},onsuccess:function(){

var username = $.trim($("#username").val());

$.ajax({

type: "POST",

async:false,

dataType: "json",

url: "/index.php",

data: "dosubmit=1&username="+username,

success: function(data){

if(data==undefined){

art.dialog({

content: data.msg,

icon: 'succeed'

});

}else{

art.dialog({

icon: 'error',

content: data.msg

});

return false;

}

}

});

return false;

}});

jQuery formValidator插件的详细参数使用说明可参见phpcms用户收藏的相关说明：