Jquery练习之表单验证实现代码 - Web前端

作者：98wpeu发布时间：2026-07-01分类：网页前端技术浏览：7

导读：JQuery练习表单验证复制代码代码如下:<body><FORMaction=""method="post"id="myform"><t...

JQuery练习表单验证
复制代码代码如下:
<body>
<FORM action="" method="post" id ="myform">
<table>
<tr>
<td>姓名：</td>
<td><inputtype ="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(){
varUsername=$("#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();
returnfalse;
}
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('提交成功！');
});

});

标签：表单代码 Web Jquery

上一篇：textarea中的手动换行处理的jquery代码 - Web前端
下一篇：Jquery截取中文字符串的实现代码 - Web前端

Jquery练习之表单验证实现代码 - Web前端

相关推荐