Jquery練習之表單驗證實現(xiàn)代碼
更新時間：2010年12月14日 18:28:31 作者：
Jquery練習之表單驗證實現(xiàn)代碼，學習jquery的朋友可以參考下。
Jquery練習表單驗證
<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>愛好:</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代碼
$(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("您還沒有選擇愛好哦！");
$("input[name='checkbox']").get(0).focus();
return false;
}
for(var i=0;i<favouriteArray.length;i++){
alert(favouriteArray[i]);
}
alert('提交成功！');
});
});
復制代碼 代碼如下:
<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>愛好:</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代碼
復制代碼 代碼如下:
$(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("您還沒有選擇愛好哦！");
$("input[name='checkbox']").get(0).focus();
return false;
}
for(var i=0;i<favouriteArray.length;i++){
alert(favouriteArray[i]);
}
alert('提交成功！');
});
});
相關文章
jQuery仿阿里云購買服務器選擇時間長度,操作簡單，只需點擊所要選的時間段，對實現(xiàn)代碼感興趣的朋友參考下2016-04-04
上一篇講解了jquery同時控制四張圖片的伸縮，想必大家對伸縮有一定了解了，本文將為大家介紹下使用按鈕控制圖片的伸縮，感興趣的朋友可以參考下哈2013-04-04
jquery slibings選取同級其他元素的實現(xiàn)代碼
jquery選取同級其他元素可以使用slibings方法，end方法可以清除之前的鏈式操作，相當于重新開始2013-11-11
這篇文章主要介紹了jQuery給動態(tài)添加的元素綁定事件的方法,對比了jQuery中事件綁定的方法以及常見版本使用綁定的區(qū)別,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了jQuery中fadein與fadeout方法用法,結合實例形式分析了jQuery使用fadein與fadeout方法實現(xiàn)頁面元素淡入淡出效果的相關技巧,需要的朋友可以參考下2016-09-09
jQuery-onload讓第一次頁面加載時圖片是淡入方式顯示
第一次打開一個頁面時,讓加載好的圖片先隱藏，然后再執(zhí)行動畫fadeIn，這里的load事件：當所有子元素已經(jīng)被完全加載完成時，load事件被發(fā)送到這個元素2012-05-05
jquery html動態(tài)生成select標簽出問題的解決方法
用jquery,json從后臺獲取一個列表，然后用一個動態(tài)生成的select標簽顯示出來，結果出現(xiàn)錯誤，下面為大家分享個不錯的解決方法，喜歡的朋友可以參考下2013-11-11
下面小編就為大家?guī)硪黄狫query獲取第一個子元素簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
本篇文章主要介紹了jQuery中Nicescroll滾動條插件的用法，Nicescroll滾動條插件是一個非常強大的基于jQuery的滾動條插件，有需要的可以了解下。2016-11-11
jquery中快速取值的方法有很多，在本文為大家介紹下通過name實現(xiàn)快速取值，感興趣的朋友可以參考下2014-01-01