jquery.validate+jquery.form提交的三种方式

方式一：是通过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>