Jquery練習(xí)之表單驗(yàn)證實(shí)現(xià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>愛好:</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 validate.js表單驗(yàn)證的基本用法入門
- 基于Bootstrap+jQuery.validate實(shí)現(xiàn)Form表單驗(yàn)證
- jquery表單驗(yàn)證使用插件formValidator
- 使用 jQuery 實(shí)現(xiàn)表單驗(yàn)證功能
- 基于Jquery實(shí)現(xiàn)表單驗(yàn)證
- jQuery 表單驗(yàn)證插件formValidation實(shí)現(xiàn)個(gè)性化錯(cuò)誤提示
- jquery實(shí)現(xiàn)表單驗(yàn)證并阻止非法提交
- jQuery實(shí)現(xiàn)用戶注冊(cè)的表單驗(yàn)證示例
- Jquery插件easyUi表單驗(yàn)證提交(示例代碼)
- jQuery實(shí)現(xiàn)表單驗(yàn)證功能
相關(guān)文章
jquery實(shí)現(xiàn)可自動(dòng)判斷位置的彈出層效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)可自動(dòng)判斷位置的彈出層效果代碼,可實(shí)現(xiàn)根據(jù)鼠標(biāo)位置進(jìn)行合理的判斷并顯示彈出層的功能,涉及jQuery鼠標(biāo)事件及頁(yè)面元素位置屬性的相關(guān)判定技巧,需要的朋友可以參考下2015-10-10jQuery插件HighCharts繪制2D柱狀圖、折線圖的組合雙軸圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts繪制2D柱狀圖、折線圖的組合雙軸圖效果,結(jié)合實(shí)例形式分析了jQuery使用HighCharts插件同時(shí)繪制柱狀圖、折線圖的組合雙軸圖實(shí)現(xiàn)步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03JQuery擴(kuò)展插件Validate 1 基本使用方法并打包下載
Validate是用于B/S結(jié)構(gòu)客戶端驗(yàn)證用的JQuery擴(kuò)展插件,使用時(shí)需要引用兩個(gè)js文件2011-09-09JQuery和PHP結(jié)合實(shí)現(xiàn)動(dòng)態(tài)進(jìn)度條上傳顯示
本文給大家介紹JQuery和PHP結(jié)合實(shí)現(xiàn)動(dòng)態(tài)進(jìn)度條上傳顯示功能,本文分步驟給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2016-11-11jquery插件之信息彈出框showInfoDialog(成功/錯(cuò)誤/警告/通知/背景遮罩)
某某同學(xué)最近寫了個(gè)基于jquery的信息彈出插件showInfoDialog,該插件對(duì)背景進(jìn)行遮罩,然后彈出信息顯示框,信息顯示種類包括(操作成功/錯(cuò)誤信息/警告信息/通知信息)感興趣的朋友可以了解下2013-01-01jQuery簡(jiǎn)單實(shí)現(xiàn)兩級(jí)下拉菜單效果代碼
這篇文章主要介紹了jQuery簡(jiǎn)單實(shí)現(xiàn)兩級(jí)下拉菜單效果代碼,基于jQuery遍歷簡(jiǎn)單實(shí)現(xiàn)菜單效果,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-09-09jquery ztree實(shí)現(xiàn)右鍵收藏功能
最近做項(xiàng)目需要使用ztree做一個(gè)右鍵收藏功能,下面小編給大家分享實(shí)例代碼,需要的朋友參考下吧2017-11-11jQuery實(shí)現(xiàn)簡(jiǎn)單評(píng)論功能
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單評(píng)論功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-08-08基于jquery實(shí)現(xiàn)頁(yè)面滾動(dòng)時(shí)頂部導(dǎo)航顯示隱藏
這篇文章主要介紹了基于jquery實(shí)現(xiàn)頁(yè)面滾動(dòng)時(shí)頂部導(dǎo)航顯示隱藏效果,當(dāng)頁(yè)面向下滾動(dòng)的時(shí)候,導(dǎo)航菜單動(dòng)態(tài)隱藏,頁(yè)面滾動(dòng)到頂部時(shí),導(dǎo)航菜單動(dòng)態(tài)顯示,淘寶也采用過此效果,感興趣的小伙伴們可以參考一下2015-11-11jQuery+slidereveal實(shí)現(xiàn)的面板滑動(dòng)側(cè)邊展出效果
WEB開發(fā)中有時(shí)需要在頁(yè)面上設(shè)置一個(gè)控制面板,默認(rèn)是不顯示的,當(dāng)用戶有需要時(shí)可以通過按鈕觸發(fā)調(diào)用面板展示。常見的有頁(yè)面?zhèn)冗吇雒姘逍Ч?。本文將使用jQuery插件并結(jié)合實(shí)例給大家介紹一下面板滑動(dòng)展示效果。2015-03-03