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