jquery实际项目应用
<%@ page contentType="text/html; charset=utf-8" language="java" errorPage="" %>..........<%String path = request.getContextPath(); %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>管理用户</title><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"><link rel="stylesheet" href="<%=path%>/css/main.css" type="text/css"><script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.4.2.js" charset="UTF-8"></script><script type="text/javascript" src="<%=path%>/js/formValidator.js" charset="UTF-8"></script><link type="text/css" rel="stylesheet" href="<%=path%>/css/validator.css"></link>.........<script language="javascript">$(function(){$.formValidator.initConfig({formid:"form1",onerror:function(msg){alert(msg)},onsuccess:function(){return true;}});//验证用户名$("#userName").formValidator({onshow:"请输入用户帐号",onfocus:"用户帐号至少3个字符,最多20个字符",oncorrect:"该用户名可以注册"}).inputValidator({min:3,max:20,onerror:"你输入的用户名非法,请确认"}).ajaxValidator({ type : "get",url : "doAjaxTest.do",datatype : "text",success : function(data){ if( $.trim(data)== "notexsits" ){ return true;} else{ return false;}},error: function(){alert("服务器没有返回数据，可能服务器忙，请重试");},onerror : "该用户帐号不可用，请更换用户名",onwait : "正在对用户名进行合法性校验，请稍候..."}).regexValidator({regexp:"username",datatype:"enum",onerror:"用户帐号格式不正确"});//验证密码$("#password").formValidator({onshow:"请输入密码",onfocus:"密码只能是6-16位",oncorrect:"密码合法"}).inputValidator({min:6,max:16,empty:{leftempty:false,rightempty:false,emptyerror:"密码两边不能有空符号"},onerror:"密码只能是6-16位,请确认"});$("#repassword").formValidator({onshow:"请输入重复密码",onfocus:"两次密码必须一致",oncorrect:"密码一致"}).inputValidator({min:6,max:16,empty:{leftempty:false,rightempty:false,emptyerror:"重复密码两边不能有空符号"},onerror:"重复密码不能为空,请确认"}).compareValidator({desid:"password",operateor:"=",onerror:"2次密码不一致,请确认"});//真实姓名$("#name").formValidator({onshow:"请输入真实姓名",onfocus:"真行姓名至少3个字符,最多20个字符",oncorrect:"该真实姓名可以使用"}).inputValidator({min:3,max:20,onerror:"你输入的真实姓名非法,请确认"})//用户说明$("#memo").formValidator({empty:true,onshow:"请输入用户说明，可以为空",onfocus:"你要是输入了，必须输入正确",oncorrect:"该用户说明可以使用",onempty:"你真的不输入用户说明吗？"}).inputValidator({min:1,max:200,onerror:"你输入的用户说明非法,请确认"})//角色$("#role").formValidator({onshow:"请选择你的角色",onfocus:"角色必须选择",oncorrect:"该角色可以使用"}).inputValidator({min:1,onerror: "请选择你的角色"});//省份$("#province").formValidator({onshow:"请选择省份",onfocus:"省份必须选择",oncorrect:"该省份可以使用"}).inputValidator({min:1,onerror: "请选择省份"});//地市$("#city").formValidator({onshow:"请选择地市",onfocus:"地市必须选择",oncorrect:"该地市可以使用"}).inputValidator({min:1,onerror: "请选择地市"});//区县$("#areaCountry").formValidator({onshow:"请选择区县",onfocus:"区县必须选择",oncorrect:"该区县可以使用"}).inputValidator({min:1,onerror: "请选择区县"});//营业厅$("#businessHall").formValidator({onshow:"请选择营业厅",onfocus:"营业厅必须选择",oncorrect:"该营业厅可以使用"}).inputValidator({min:1,onerror: "请选择营业厅"});//角色选择$('#role').change(function(){if($(this).children('option:selected').val()==-1){$("#province").removeAttr("disabled");$("#city").removeAttr("disabled");$("#areaCountry").removeAttr("disabled");$("#businessHall").removeAttr("disabled"); $("#province option").attr("selected",true); $("#city").empty(); $("#city").append("<optionvalue='-1'>请选择...</option>"); $("#areaCountry").empty(); $("#areaCountry").append("<optionvalue='-1'>请选择...</option>"); $("#businessHall").empty(); $("#businessHall").append("<optionvalue='-1'>请选择...</option>"); //去掉jquery验证 $("#province").unFormValidator(true); $("#city").unFormValidator(true); $("#areaCountry").unFormValidator(true); $("#businessHall").unFormValidator(true); } if($(this).children('option:selected').val()==1){$("#province").attr("disabled","disabled");$("#city").attr("disabled","disabled");$("#areaCountry").attr("disabled","disabled");$("#businessHall").attr("disabled","disabled"); $("#province option").attr("selected",true); $("#city").empty(); $("#city").append("<optionvalue='-1'>请选择...</option>"); $("#areaCountry").empty(); $("#areaCountry").append("<optionvalue='-1'>请选择...</option>"); $("#businessHall").empty(); $("#businessHall").append("<optionvalue='-1'>请选择...</option>"); //去掉jquery验证 $("#province").unFormValidator(true); $("#city").unFormValidator(true); $("#areaCountry").unFormValidator(true); $("#businessHall").unFormValidator(true);}if($(this).children('option:selected').val()==2){$("#province").removeAttr("disabled");$("#city").attr("disabled","true");$("#areaCountry").attr("disabled","true");$("#businessHall").attr("disabled","true"); $("#city").empty(); $("#city").append("<optionvalue='-1'>请选择...</option>"); $("#areaCountry").empty(); $("#areaCountry").append("<optionvalue='-1'>请选择...</option>"); $("#businessHall").empty(); $("#businessHall").append("<optionvalue='-1'>请选择...</option>"); //开启jquery验证 $("#province").unFormValidator(false); //去掉jquery验证 $("#city").unFormValidator(true); $("#areaCountry").unFormValidator(true); $("#businessHall").unFormValidator(true);}if($(this).children('option:selected').val()==3){$("#province").removeAttr("disabled");$("#city").removeAttr("disabled");$("#areaCountry").attr("disabled","true");$("#businessHall").attr("disabled","true"); $("#areaCountry").empty(); $("#areaCountry").append("<optionvalue='-1'>请选择...</option>"); $("#businessHall").empty(); $("#businessHall").append("<optionvalue='-1'>请选择...</option>"); //开启jquery验证 $("#province").unFormValidator(false); $("#city").unFormValidator(false); //去掉jquery验证 $("#areaCountry").unFormValidator(true); $("#businessHall").unFormValidator(true);}if($(this).children('option:selected').val()==4){$("#province").removeAttr("disabled");$("#city").removeAttr("disabled");$("#areaCountry").removeAttr("disabled");$("#businessHall").attr("disabled","true"); $("#businessHall").empty(); $("#businessHall").append("<optionvalue='-1'>请选择...</option>"); //开启jquery验证 $("#province").unFormValidator(false); $("#city").unFormValidator(false); $("#areaCountry").unFormValidator(false); //去掉jquery验证 $("#businessHall").unFormValidator(true);} if($(this).children('option:selected').val()==5){$("#province").removeAttr("disabled");$("#city").removeAttr("disabled");$("#areaCountry").removeAttr("disabled");$("#businessHall").removeAttr("disabled"); //开启jquery验证 $("#province").unFormValidator(false); $("#city").unFormValidator(false); $("#areaCountry").unFormValidator(false); $("#businessHall").unFormValidator(false);} } );});</script></head><body style="overflow-x:hidden;" ><!-- 头部标识开始 --><div id="topFlag" style="font-size: 14px;color: red;font-weight: bold;height: 30px;">>>用户管理</div><!-- 头部标识结束 --><form action="doUserMgr.do?method=addUser" method="post" name="form1" id="form1" ><table width="96%" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="73A2D6"> <tr bgcolor="#8EC0E6"> <td height="25" colspan="3" align="center" background="images/bg_gen_head.jpg" class="textAnmedia"> 新增用户 </td> </tr> <tr> <td width="15%" height="150" rowspan="11" align="center" bgcolor="#E7F0F7"> 基本信息 </td> </tr> <tr> <td width="20%" height="25" align="center" bgcolor="#E7F0F7"> 用户帐号 </td> <td width="65%" bgcolor="#FFFFFF"> <input name="userName" id="userName" type="text" class="txtInput"/> <span id="userNameTip" class="border_3"></span> </td> </tr> <tr> <td width="20%" height="25" align="center" bgcolor="#E7F0F7"> 用户密码 </td> <td bgcolor="#FFFFFF"> <input name="password" id="password"type="password" class="txtInput"/> <span id="passwordTip" class="border_3"></span> </td> </tr> <tr> <td width="20%" height="25" align="center" bgcolor="#E7F0F7"> 重复密码 </td> <td bgcolor="#FFFFFF"> <input name="repassword" id="repassword"type="password" class="txtInput"/> <span id="repasswordTip" class="border_3"></span> </td> </tr> <tr> <td width="20%" height="25" align="center" bgcolor="#E7F0F7"> 真实姓名 </td> <td bgcolor="#FFFFFF"> <input name="name" id="name" type="text" class="txtInput"/> <span id="nameTip" class="border_3"></span> </td> </tr> <tr> <td width="20%" height="25" align="center" bgcolor="#E7F0F7"> 用户说明 </td> <td bgcolor="#FFFFFF"> <input name="memo" id="memo" type="text"class="txtInput" /> <span id="memoTip" class="border_3"></span> </td> </tr> <tr> <td width="20%" height="25" align="center" bgcolor="#E7F0F7"> 角色 </td> <td bgcolor="#FFFFFF"> <select name="role" id="role" style="width:135px;" > <option value="-1">请选择...</option> <beans:tagHandle id="tagID"> <database:query id="<%=tagID%>" scope="page" >select * from t_role_power</database:query> <database:rows id="db" query='<%=tagID%>'> <option value="<%=db.get("userPower")%>" ><%=db.get("userRole")%></option> </database:rows> <database:release query='<%=tagID%>'/> </beans:tagHandle> </select> <span id="roleTip" class="border_3"></span> </td> </tr> <tr> <td width="20%" height="25" align="center" bgcolor="#E7F0F7"> 省份 </td> <td bgcolor="#FFFFFF"> <select id="province" name="province" style="width: 135px;"> <option value="-1" >请选择...</option><beans:tagHandle id="tagProvince"><database:prepareQuery id="<%=tagProvince%>" scope="page"> select id,city_code,city_name from tb_area_city where leve = 1</database:prepareQuery><database:rows id="db2" query='<%=tagProvince%>'><option value="<%=db2.get("id") %>,<%=db2.get("city_name") %>" ><%=db2.get("city_name") %></option></database:rows><database:release query='<%=tagProvince%>'/></beans:tagHandle> </select> <span id="provinceTip" class="border_3"></span> </td> </tr> <tr> <td width="20%" height="25" align="center" bgcolor="#E7F0F7"> 地市 </td> <td bgcolor="#FFFFFF"> <select id="city" name="city" style="width: 135px;"> <option value="-1" >请选择...</option> </select><span id="cityTip" class="border_3"></span> </td> </tr> <tr> <td width="20%" height="25" align="center" bgcolor="#E7F0F7"> 区县 </td> <td bgcolor="#FFFFFF"> <select id="areaCountry" name="areaCountry" style="width: 135px;"> <option value="-1" >请选择...</option> </select> <span id="areaCountryTip" class="border_3"></span></td> </tr> <tr> <td width="20%" height="25" align="center" bgcolor="#E7F0F7"> 营业厅</td> <td bgcolor="#FFFFFF"> <select id="businessHall" name="businessHall" style="width: 135px;"><option value="-1" >请选择...</option></select><span id="businessHallTip" class="border_3"></span></td> </tr> <!--=======================================栏目权限==============================================--> <tr> <td width="15%" height="25" align="center" bgcolor="#E7F0F7"> 栏目权限 </td> <td colspan="2" bgcolor="#FFFFFF" style="padding:0px 20px 10px 20px;"><beans:tagHandle id="tagID"> <database:query id="<%=tagID%>" scope="page" > select id, className from t_operate where parentID = -1ORDER BY id </database:query> <database:rows id="db" query='<%=tagID%>'> <BR> <%=db.get("className")%> <BR> <beans:tagHandle id="tagIDC"> <database:prepareQuery id='<%=tagIDC%>' scope='page' variables='<%=new Object[] {db.get("id")}%>'> select id, className from t_operate where parentID=? order by id </database:prepareQuery> <database:rows id="db1" query='<%=tagIDC%>'> <input type="checkbox" value="<%=db1.get("Id")%>" id="userPower" name="userPower" <%if(db1.get("className").equals("修改密码")){out.print("checked");}%> /> -- <%=db1.get("className")%><BR> </database:rows> <database:release query='<%=tagIDC%>'/> </beans:tagHandle> </database:rows> <database:release query='<%=tagID%>'/> </beans:tagHandle> </td> </tr> <!--=======================================频道权限==============================================--> <tr> <td height="25" colspan="3" align="center" bgcolor="#FFFFFF"> <input name="submit" type="submit" value="保 存"> </td> </tr> </table></table> </form></body></html>
页:
[1]