Jquery中文网 www.jquerycn.cn
Jquery中文网 >  jQuery  >  jquery 教程  >  正文 Jquery练习之表单验证实现代码

Jquery练习之表单验证实现代码

发布时间:2013-07-21   编辑:www.jquerycn.cn
Jquery练习之表单验证实现代码,学习jquery的朋友可以参考下。
jquery练习之表单验证实现代码,学习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('提交成功!');
});

});

您可能感兴趣的文章:
Jquery练习之表单验证实现代码
常用js验证代码大全(Email、手机号码、身份证号码、文件类型等)
php验证码大全(实例分享)
基于jquery实现的服务器验证控件的启用和禁用代码
jquery 的非空验证操作
php彩色验证码的简单例子
jQuery基础学习技巧总结第1/4页
jQuery表单验证插件 jQuery.validity
php各种验证码与Ajax验证的实例分享
php验证码的三个实例代码分享

[关闭]