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

方式一:是通过jquery.validate的submitHandler选项,即当表单通过验证时执行回调函数。在这个回调函数中通过jquery.form来提交表单;红色和绿色部分为重点

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

      }

    }

  });

});

方式二:是通过jquery.form的beforeSubmit,即在提交表单前执行的回调函数,这个函数如果返回true,则提交表单,如果返回false,则终止提交表单。根据jquery.validate插件的valid()方法,就可以通过jquery.form提交表单时来对表单进行验证。



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

      }

    }

  });

});

方式三:是通过jquery.validate验证表单的validate方法。这个方法的好处是对表单验证的控制更加自由,其实这根第二种一样,只是把验证配置信息单独摘了出来,方便修改管理

  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提交

  });

});

你可能感兴趣的:(jquery)