方式一：是通过jquery.validate的submitHandler选项，即当表单通过验证时执行回调函数。在这个回调函数中通过jquery.form来提交表单；红色和绿色部分为重点
<script language="javascript">
function showResponse(responseText,statusText) {
if(statusText=='success'){
$("#result").html(responseText);
}
}
$(document).ready(function(){
$('#commentForm').validate({
submitHandler:function(form){
$(form).ajaxSubmit({
type:"post",
url:"test_save.php?time="+ (new Date()).getTime(),
//beforeSubmit: showRequest,
success: showResponse
});
},//submitHandler是jQuery.validate通过验证后运行的函数,里面要加上表单提交的函数,否则表单不会提交,因此我们在里面用ajaxSubmit就可以用ajax提交数据了
rules:{
username:{required:true,minlength:3},
email:{
required:true
}
}
});
});
</script>
方式二：是通过jquery.form的beforeSubmit，即在提交表单前执行的回调函数，这个函数如果返回true，则提交表单，如果返回false，则终止提交表单。根据jquery.validate插件的valid()方法，就可以通过jquery.form提交表单时来对表单进行验证。
<script language="javascript">
function showResponse(responseText,statusText) {
return true;
}
function showRequest(formData,jqForm,options){
return $("#commentForm").valid();
}
$(document).ready(function(){
$('#commentForm').submit(function(){
$(this).ajaxSubmit({
type:"post",
url:"test_save.php?time="+ (new Date()).getTime(),
beforeSubmit:showRequest,//上面的绿色部分是检查是否通过验证
success:showResponse
});
return false; //此处必须返回false，阻止常规的form提交
});
$('#commentForm').validate({
rules:{
username:{required:true,minlength:3},
email:{
required:true
}
}
});
});
</script>
方式三：是通过jquery.validate验证表单的validate方法。这个方法的好处是对表单验证的控制更加自由，其实这根第二种一样，只是把验证配置信息单独摘了出来，方便修改管理
<script language="javascript">
var options={
rules:{
username:{required:true,minlength:3},
email:{
required:true
}
}
};
function showResponse(responseText,statusText) {
if(statusText=='success'){
$("#result").html(responseText);
}
}
function showRequest(formData,jqForm,options){
return $("#commentForm").valid();
}
$(document).ready(function(){
validator=$('#commentForm').validate(options);
$("button").click(function(){
validator.form();
});
$('#commentForm').submit(function(){
$(this).ajaxSubmit({
type:"post",
url:"test_save.php?time="+ (new Date()).getTime(),
beforeSubmit:showRequest,
success:showResponse
});
return false; //此处必须返回false，阻止常规的form提交
});
});
</script>