Jquery練習(xí)之表單驗(yàn)證實(shí)現(xiàn)代碼

更新時(shí)間：2010年12月14日 18:28:31 作者：

Jquery練習(xí)之表單驗(yàn)證實(shí)現(xiàn)代碼，學(xué)習(xí)jquery的朋友可以參考下。

Jquery練習(xí)表單驗(yàn)證

 
<body> 
<form action="" method="post" id ="myform"> 
<table> 
<tr> 
<td>姓名：</td> 
<td><input type ="text" id = "name" name ="name"></td> 
</tr> 
<tr> 
<td>年齡:</td> 
<td><input type ="text" id="age" name ="age"></td> 
</tr> 
<tr> 
<td>性別:</td> 
<td><input type = "radio" id="sex_man" name="sex" value="男">男 <input type = "radio" id="sex_woman" name="sex" value = "女" checked ="checked">女</td> 
</tr> 
<tr> 
<td>地址：</td> 
<td> 
<select id = "add"> 
<option values="北京">北京</option> 
<option values="河南">河北</option> 
<option values="河南">河南</option> 
</select> 
</td> 
</tr> 
<tr> 
<td>愛(ài)好:</td> 
<td> 
<input type ="checkbox" id = "cbOnTheInternet" name="checkbox" value ="上網(wǎng)" checked="checked">上網(wǎng) 
<input type ="checkbox" id = "cbJuketing" name="checkbox" value="旅游">旅游 
<input type ="checkbox" id = "cbWatchingTv" name="checkbox" value="看電影">看電影 
</td> 
</tr> 
<tr> 
<td><input type ="submit" value="提交"></td> 
</tr> 
</table> 
</form> 
</body> 
</html> 

Jquery代碼

復(fù)制代碼代碼如下:

 
$(document).ready( 
function() { 
$("#myform").submit(function(){ 
var username=$("#name").val(); 
var age=$("#age").val(); 
var sex=$("input[name ='sex'][checked]").val(); 
var address=$("#add option[selected]").val(); 
var size=$("input[name='checkbox'][checked]").size(); 

var favouriteArray=Array(size); 
$("input[name='checkbox'][checked]").each(function(index,docEl){ 
favouriteArray[index]=$(this).val();// or docEl.value 
}); 
if(username=="") 
{ 
alert("性名不能為空！"); 
$("#name").focus(); 
return false; 
} 
if(age=="") 
{ 
alert("年齡不能為空"); 
$("#age").focus(); 
return false; 
} 
if(size==0) 
{ 
alert("您還沒(méi)有選擇愛(ài)好哦！"); 
$("input[name='checkbox']").get(0).focus(); 
return false; 
} 
for(var i=0;i<favouriteArray.length;i++){ 
alert(favouriteArray[i]); 
} 
alert('提交成功！'); 
}); 

}); 

您可能感興趣的文章:

表單驗(yàn)證

相關(guān)文章

jQuery模仿阿里云購(gòu)買服務(wù)器選擇購(gòu)買時(shí)間長(zhǎng)度的代碼
jQuery仿阿里云購(gòu)買服務(wù)器選擇時(shí)間長(zhǎng)度,操作簡(jiǎn)單，只需點(diǎn)擊所要選的時(shí)間段，對(duì)實(shí)現(xiàn)代碼感興趣的朋友參考下
2016-04-04
jQuery使用一個(gè)按鈕控制圖片的伸縮實(shí)現(xiàn)思路
上一篇講解了jquery同時(shí)控制四張圖片的伸縮，想必大家對(duì)伸縮有一定了解了，本文將為大家介紹下使用按鈕控制圖片的伸縮，感興趣的朋友可以參考下哈
2013-04-04
jquery slibings選取同級(jí)其他元素的實(shí)現(xiàn)代碼
jquery選取同級(jí)其他元素可以使用slibings方法，end方法可以清除之前的鏈?zhǔn)讲僮?，相?dāng)于重新開(kāi)始
2013-11-11
jQuery給動(dòng)態(tài)添加的元素綁定事件的方法
這篇文章主要介紹了jQuery給動(dòng)態(tài)添加的元素綁定事件的方法,對(duì)比了jQuery中事件綁定的方法以及常見(jiàn)版本使用綁定的區(qū)別,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-03-03
jQuery中fadein與fadeout方法用法示例
這篇文章主要介紹了jQuery中fadein與fadeout方法用法,結(jié)合實(shí)例形式分析了jQuery使用fadein與fadeout方法實(shí)現(xiàn)頁(yè)面元素淡入淡出效果的相關(guān)技巧,需要的朋友可以參考下
2016-09-09
jQuery-onload讓第一次頁(yè)面加載時(shí)圖片是淡入方式顯示
第一次打開(kāi)一個(gè)頁(yè)面時(shí),讓加載好的圖片先隱藏，然后再執(zhí)行動(dòng)畫fadeIn，這里的load事件：當(dāng)所有子元素已經(jīng)被完全加載完成時(shí)，load事件被發(fā)送到這個(gè)元素
2012-05-05
jquery html動(dòng)態(tài)生成select標(biāo)簽出問(wèn)題的解決方法
用jquery,json從后臺(tái)獲取一個(gè)列表，然后用一個(gè)動(dòng)態(tài)生成的select標(biāo)簽顯示出來(lái)，結(jié)果出現(xiàn)錯(cuò)誤，下面為大家分享個(gè)不錯(cuò)的解決方法，喜歡的朋友可以參考下
2013-11-11
Jquery獲取第一個(gè)子元素簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇Jquery獲取第一個(gè)子元素簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-06-06
jQuery中Nicescroll滾動(dòng)條插件的用法
本篇文章主要介紹了jQuery中Nicescroll滾動(dòng)條插件的用法，Nicescroll滾動(dòng)條插件是一個(gè)非常強(qiáng)大的基于jQuery的滾動(dòng)條插件，有需要的可以了解下。
2016-11-11
jquery 通過(guò)name快速取值示例
jquery中快速取值的方法有很多，在本文為大家介紹下通過(guò)name實(shí)現(xiàn)快速取值，感興趣的朋友可以參考下
2014-01-01