简单实用的反馈表单无刷新提交带验证

190 阅读 0 评论 126 点赞

我是靠谱客的博主冷酷鼠标，最近开发中收集的这篇文章主要介绍简单实用的反馈表单无刷新提交带验证，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

js文件可以查看源码

XML/HTML Code

复制代码代码如下:

 
<div id="preview"></div> 
<div id="formbox"> 
<form name="form" id="form" action="submit.php" method="post"> 
<ul id="ngothastyle3" > 
<li> 
<label>Name</label> 
<input type="text" name="name" class="" maxlength="40" /> 
</li> 
<li> 
<label>Email</label> 
<input type="text" name="email" class="" maxlength="100" /> 
</li> 
<li> 
<label>Message</label> 
<textarea name="message" rows="5" cols="45" class=""></textarea> 
</li> 
<li> 
<label> </label> 
<input type="submit" value="Submit"> 
</li> 
</ul> 
</form> 
</div> 

JavaScript Code

复制代码代码如下:

 
<script type="text/javascript"> 
$('document').ready(function(){ 

$('#form').validate({ 
rules:{ 
"name":{ 
required:true, 
maxlength:40 
}, 

"email":{ 
required:true, 
email:true, 
maxlength:100 
}, 

"message":{ 
required:true 
}}, 

messages:{ 
"name":{ 
required:"This field is required" 
}, 

"email":{ 
required:"This field is required", 
email:"Please enter a valid email address" 
}, 

"message":{ 
required:"This field is required" 
}}, 

submitHandler: function(form){ 
$(form).ajaxSubmit({ 
target: '#preview', 
success: function() { 
$('#formbox').slideUp('fast'); 
} 
}); 

} 

}) 

}); 
</script> 