Jquery练习之表单验证实现代码
2010-12-14 00:00
1141 查看
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练习之表单验证实现代码
- jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
- jquery插件制作 表单验证实现代码
- jquery 实现表单验证功能代码(简洁)
- jquery 实现表单验证功能代码(简洁)
- jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
- 简单的jquery代码实现表单验证
- jQuery Validate表单验证插件实现代码
- jquery 实现表单验证功能代码(简洁)
- jquery实现表单验证并阻止非法提交
- jQuery正则表达式实现表单验证功能(注册)
- jquery实现上传图片及图片大小验证、图片预览效果代码
- 利用Jquery实现一个典型的form表单前端验证
- jQuery实现用户注册的表单验证
- jquery中通过过滤器获取表单元素的实现代码
- 使用jQuery Validate实现表单验证
- PHP代码实现表单数据验证类
- jQuery实现表单步骤流程导航代码分享
- jQuery动态设置form表单的enctype值(实现代码)
- 基于jquery实现智能表单验证操作