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