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 ="上网" checked="checked">上网
<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('提交成功!');
});

});



相关阅读:
asp的通用数据分页类
浅谈ASP.NET文件下载函数使用方法
Dos下终止进程的方法
把从SQL中取出的数据转化成XMl格式
EXT调用ASP.NET AJAX WebService
asp.net 程序优化精选
教你如何解密js/vbs/vbscript加密的编码异处理小结
asp 生成任意英文+数字位数长度的随机码函数
安全技巧:快速定位Linux中的网络服务
关于JavaScript定义类和对象的几种方式
Vista下使用节能方式,通宵下载也能节能
丢失归档日志文件的数据库恢复方法
XHTML常用的结构标签
实现基本Ajax技术 4.1 完成验证
快速导航

Copyright © 2016 phpStudy |