簡單實(shí)用的反饋表單無刷新提交帶驗(yàn)證
更新時間：2013年11月15日 16:30:18 作者：
表單無刷新提交帶驗(yàn)證，非常適用于反饋，具體的實(shí)現(xiàn)如下包含各個功能代碼，喜歡的朋友可以參考下
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>
XML/HTML Code
復(fù)制代碼 代碼如下:
<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
復(fù)制代碼 代碼如下:
<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>
相關(guān)文章
寫個播放器應(yīng)付復(fù)習(xí)，因?yàn)锳jax涉及到跨域獲取天氣信息，有兩個版本，一個是直接跨域，IE10支持，其他的瀏覽器要改配置2013-05-05
這篇文章主要為大家詳細(xì)介紹了OpenLayers實(shí)現(xiàn)圖層切換控件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要為大家詳細(xì)介紹了Bootstrap按鈕下拉菜單組件，感興趣的小伙伴們可以參考一下2016-05-05
gulpjs是一個前端構(gòu)建工具,gulpjs使用的是nodejs中stream來讀取和操作數(shù)據(jù)，其速度更快,有興趣的可以了解一下。2017-01-01
本文是對js中的onclick事件傳參進(jìn)行了詳細(xì)的講解，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
uni-app小程序分享功能實(shí)現(xiàn)方法舉例
這篇文章主要給大家介紹了關(guān)于uni-app小程序分享功能實(shí)現(xiàn)方法的相關(guān)資料,uni-app中有分享的API接口,但是需要現(xiàn)在QQ或者微信等開發(fā)者平臺上注冊賬號,驗(yàn)證公司信息,而且只能分享圖片或者文本等內(nèi)容,需要的朋友可以參考下2023-07-07
textbox右鍵菜單...2006-10-10
這篇文章主要給大家介紹了關(guān)于如何利用JavaScript編寫一個格斗小游戲，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
網(wǎng)絡(luò)圖片延遲加載實(shí)現(xiàn)代碼 超越j(luò)query控件
原理是分段加載圖片，主要用于大型網(wǎng)站節(jié)省帶寬，可是他們提供的東西壓縮混淆看不清，還有的要基于什么雅虎的什么庫，總之是很麻煩的，JQ的控件倒是夠清晰了，只是還是沒有達(dá)到節(jié)省網(wǎng)絡(luò)帶寬的效果2010-03-03
js實(shí)現(xiàn)的GridView即表頭固定表體有滾動條且可滾動
實(shí)現(xiàn)GridView，表頭固定，表體有滾動條且可滾動，下面有個不錯的示例，希望對大家有所幫助2014-02-02