表单基础验证
jquery关于表单元素的操作：
?
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">--> </head> <style type="text/css"> .table2{width:100%}.table2 td,.table2 th,.table4 td,.table4 th{border-top:1px solid #fff; border-left:1px solid #fff; border-right:1px solid #dddddd; border-bottom:1px solid #dddddd; padding:3px 5px 3px}.table2 .cols{background:#e5f0f5; text-align:right; border-bottom:1px solid #c0d0dc; border-right:1px solid #cad8e2; font-family:'\5b8b\4f53' arial, tahoma}.table2 .text{width:160px; height:20px; border-left:1px solid #909193; border-top:1px solid #909193; border-bottom:1px solid #e8e8e9; border-right:1px solid #e8e8e9; padding:0 4px; line-height:20px}.table2 .cols2{background:#e5f0f5; text-align:center; border-bottom:1px solid #c0d0dc; border-right:1px solid #cad8e2; font-family:'\5b8b\4f53' arial, tahoma}.table2 .cols_c{background:#e5f0f5; text-align:center; border-bottom:1px solid #c0d0dc; border-right:1px solid #cad8e2; font-family:'\5b8b\4f53' arial, tahoma} </style> <body> <form action="" onsubmit="return check()"> <table cellpadding="0" cellspacing="0" border="0"> <tr> <td id="userName" name="userName" value=""/> </td> </tr> <tr> <td id="userAge_1" name="userAge" value="1" checked="checked">男 <input type="radio" id="userAge_2" name="userAge" value="2" >女 <input type="radio" id="userAge_3" name="userAge" value="3" >妖怪 </td> </tr> <tr> <td id="userIndustry_1" name="userIndustry" value="1" checked="checked">IT/互联网 <input type="checkbox" id="userIndustry_2" name="userIndustry" value="2" >教育 <input type="checkbox" id="userIndustry_3" name="userIndustry" value="3" >医院 </td> </tr> <tr> <td name="userDegree"> <option value="">请选择</option> <option value="1">大专</option> <option value="2">本科</option> <option value="3">硕士</option> </select> </td> </tr> <tr> <td cols="50" id="remark" name="remark"></textarea> </td> </tr> <tr> <td align="left"> <input type="button" value="设定特定的按钮为选中" onclick="radioOper()"> </td> </tr> <tr> <td align="left"> <input type="button" value="得到选中的文本" onclick="selectOper(1)"> <input type="button" value="设定特定的下标为选中" onclick="selectOper(2)"> </td> </tr> <tr> <td align="left"> <input type="button" value="全选" onclick="checkOper(1)"> <input type="button" value="全不选" onclick="checkOper(2)"> <input type="button" value="选择奇数" onclick="checkOper(3)"> <input type="button" value="反选" onclick="checkOper(4)"> </td> </tr> <tr> <td colspan="4" align="center"> <input type="submit" value="提 交"> </td> </tr> </table> </form> </body></html><script type="text/javascript" src="js/jquery-1.6.4.js"></script><script type="text/javascript">function check(){//得到文本框的值var userName = $('#userName').val();alert('userName:'+userName);//得到单选框的值var userAge = $(":radio[name='userAge']").val();alert('userAge:'+userAge);//得到多选框的值var chk_value =[]; $('input[name="userIndustry"]:checked').each(function(){ chk_value.push($(this).val()); }); alert('chk_value:'+chk_value);//得到下拉框的值var userDegree = $('#userDegree').val();alert('userDegree:'+userDegree);//得到备注的值var remark = $('#remark').val();alert('remark:'+remark);return false;}//下拉框的操作function selectOper(operType){if(operType == 1){//得到选中的文本var userDegreeText = $('#userDegree').find('option:selected').text();alert('userDegreeText:'+userDegreeText);}else if(operType == 2){//设定制定的单选下标为选中状态$('#userDegree')[0].selectedIndex = 3;}}//单选框的操作function radioOper(){$('input[name=userAge]').get(2).checked = true;}//多选框的操作function checkOper(operType){if(operType == 1){//多选框的全选操作$("[name='userIndustry']").attr("checked",'true');//全选 }else if(operType == 2){//取消全选$("[name='userIndustry']").removeAttr("checked");//取消全选 }else if(operType == 3){$("[name='userIndustry']:even").attr("checked",'true');//选中所有奇数 }else if(operType == 4){$("[name='userIndustry']").each(function(){//反选 if($(this).attr("checked")){ $(this).removeAttr("checked"); }else{ $(this).attr("checked",'true'); } });}}</script>?