提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

jQuery代码 实现 验证 表单 练习
2023-06-13 09:14:25 时间
Jquery练习表单验证
复制代码代码如下:

<body>
<formaction=""method="post"id="myform">
<table>
<tr>
<td>姓名：</td>
<td><inputtype="text"id="name"name="name"></td>
</tr>
<tr>
<td>年龄:</td>
<td><inputtype="text"id="age"name="age"></td>
</tr>
<tr>
<td>性别:</td>
<td><inputtype="radio"id="sex_man"name="sex"value="男">男<inputtype="radio"id="sex_woman"name="sex"value="女"checked="checked">女</td>
</tr>
<tr>
<td>地址：</td>
<td>
<selectid="add">
<optionvalues="北京">北京</option>
<optionvalues="河南">河北</option>
<optionvalues="河南">河南</option>
</select>
</td>
</tr>
<tr>
<td>爱好:</td>
<td>
<inputtype="checkbox"id="cbOnTheInternet"name="checkbox"value="上网"checked="checked">上网
<inputtype="checkbox"id="cbJuketing"name="checkbox"value="旅游">旅游
<inputtype="checkbox"id="cbWatchingTv"name="checkbox"value="看电影">看电影
</td>
</tr>
<tr>
<td><inputtype="submit"value="提交"></td>
</tr>
</table>
</form>
</body>
</html>

Jquery代码
复制代码代码如下:

$(document).ready(
function(){
$("#myform").submit(function(){
varusername=$("#name").val();
varage=$("#age").val();
varsex=$("input[name="sex"][checked]").val();
varaddress=$("#addoption[selected]").val();
varsize=$("input[name="checkbox"][checked]").size();

varfavouriteArray=Array(size);
$("input[name="checkbox"][checked]").each(function(index,docEl){
favouriteArray[index]=$(this).val();//ordocEl.value
});
if(username=="")
{
alert("性名不能为空！");
$("#name").focus();
returnfalse;
}
if(age=="")
{
alert("年龄不能为空");
$("#age").focus();
returnfalse;
}
if(size==0)
{
alert("您还没有选择爱好哦！");
$("input[name="checkbox"]").get(0).focus();
returnfalse;
}
for(vari=0;i<favouriteArray.length;i++){
alert(favouriteArray[i]);
}
alert("提交成功！");
});

});

相关文章