`

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[value='-1']").attr("selected",true);
    				$("#city").empty();
    				$("#city").append("<option  value='-1'>请选择...</option>");
    				$("#areaCountry").empty();
    				$("#areaCountry").append("<option  value='-1'>请选择...</option>");
    				$("#businessHall").empty();
    				$("#businessHall").append("<option  value='-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[value='-1']").attr("selected",true);
    				$("#city").empty();
    				$("#city").append("<option  value='-1'>请选择...</option>");
    				$("#areaCountry").empty();
    				$("#areaCountry").append("<option  value='-1'>请选择...</option>");
    				$("#businessHall").empty();
    				$("#businessHall").append("<option  value='-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("<option  value='-1'>请选择...</option>");
    				$("#areaCountry").empty();
    				$("#areaCountry").append("<option  value='-1'>请选择...</option>");
    				$("#businessHall").empty();
    				$("#businessHall").append("<option  value='-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("<option  value='-1'>请选择...</option>");
    				$("#businessHall").empty();
    				$("#businessHall").append("<option  value='-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("<option  value='-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 = -1  ORDER 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>
 

 

分享到:
评论

相关推荐

    jQuery权威指南-源代码

    其次详细讲解了jQuery的各种选择器、jQuery操作DOM的方法、jQuery中的事件与应用、jQuery中的动画和特效、Ajax在jQuery中的应用,以及各种常用的jQuery插件的使用方法和技巧,所有这些知识点都配有完整的示例(包括...

    jquery50个实例下载

     jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。  jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来...

    jquery框架的js库

    jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多...在项目里我把jquery作为自己唯一的框架类包。使用其间也有一点点心得,其实这些心得,在jquery的文档上面也可能有讲,不过还是记下来,以备忘罢。

    jquery-1.2.3.rar

    jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。 jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用...

    jQuery API (中英文对照版)

    jQuery API (中英文对照版) ---------------------------------- ...在项目里我把jquery作为自己唯一的框架类包。使用其间也有一点点心得,其实这些心得,在jquery的文档上面也可能有讲,不过还是记下来,以备忘罢。

    jQuery-1.3.js已压缩

    已压缩过的jQuery-1.3.js --------------------- ...在项目里我把jquery作为自己唯一的框架类包。使用其间也有一点点心得,其实这些心得,在jquery的文档上面也可能有讲,不过还是记下来,以备忘罢。

    jQuery-1.3.js未压缩

    jQuery-1.3.js未压缩 -------------------------------- ...在项目里我把jquery作为自己唯一的框架类包。使用其间也有一点点心得,其实这些心得,在jquery的文档上面也可能有讲,不过还是记下来,以备忘罢。

    jquery 资料合集 实例

    在项目里我把jquery作为自己唯一的框架类包。使用其间也有一点点心得,其实这些心得,在jquery的文档上面也可能有讲,不过还是记下来,以备忘罢。三层架构, 企业库(Enterprise Library)是微软的模式与实践...

    Android例子源码安卓内嵌jquery.mobile做的网站.zip

    本例子是一个原生安卓和jquery.mobile结合的例子源码,直接读取本地html信息显示,在实际应用中可以把本地html改成网络的地址,用jquery.mobile的好处就是B/S架构的好处,一处改变处处都变,更改功能不需要更新...

    15天学会jquery

     jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。  jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来...

    疯狂Ajax讲义:Prototype/jQuery+DWR+Spring+Hibernate整合开发(part01)

    第三部分则提供了2个综合性案例:Blog系统和电子拍卖系统,让读者将前面所学真正应用到实际项目中。 《疯狂Ajax讲义:Prototype/jQuery+DWR+Spring+Hibernate整合开发》绝大部分章节后都提供了相应的编程习题,供...

    jQuery JavaScript与CSS开发入门经典

    JQuery堪称动态Web应用程序领域的编程利器,可帮助您利用更少代码完成更多工作,同时减少错误数量。jQuery将JavaScript编程量精简为寥寥数行代码,使JavaScript变得更直观,更富魅力。iQuery还允许同时为一个或多个...

    项目后端采用ssm框架 前端采用HTML+jQuery+bootstrap 数据库使用了MySQL

    通过参与实际项目,你可以应用所学的理论知识,深入了解软件开发或其他领域的实践流程和技术要求。 可放心下载学习借鉴,你会有所收获。 【无积分此资源可私信博主有偿获取】 # 注意 1. 本资源仅用于开源学习和...

    时间线tab切换页 jquery-time

    拓展性强,易于上手,适合经常用jquery开发的小伙伴在实际项目开发过程当中进行使用以及测试效果。欢迎大家下载!目前效果只是简单处理,左侧年份显示不同颜色的圆圈,隔年选中时会有左右侧显示不同的点来点缀界面。...

    jquery实现全选反选功能

    jquery实现全选反选功能,代码可以直接使用,可应用于实际项目当中。

    jQuery详细教程

    关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元素。 jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。 选择器允许您对 HTML 元素组或单个元素进行操作。 在 ...

    ssm crud项目 使用ssm bootstrap jquery等技术 入门小demo 员工管理crud.zip

    这些项目旨在展示SSM框架在实际应用中的魅力,同时也为开发者提供了一个快速学习和实践的机会。通过下载和使用这些项目,您将能够深入了解SSM框架的核心概念、设计模式和最佳实践。 二、项目特点 实战性强:这些...

    将jQuery应用于login页面的问题及解决

    最近在学习和试用jquery,感觉它的ajax和ashx发回json简直是完美的结合,如果我们可以在Form验证时使用这种方式,则login页面几乎就可以达到简洁的极致了。...但在代码完成,实际使用时每次进入login.asp

    javaWeb当当购书网(jsp+mysql+jquery+css)

    该系统功能完善、界面美观、操作简单、功能齐全、管理便捷,具有很高的实际应用价值 二、技术实现 技术栈:jsp+mysql+jquery+css 三、系统功能 登录 注册新用户 首页 分类浏览 编辑推荐 新书热卖榜 热销图书 最新...

    Routerjs:jQuery的路由器

    jQuery的路由器最初,我开始启动此项目,以便像其他框架(Angularjs,Reactjs,Vue.js)一样在前端提供路由。 用户将可以将其与JQuery和其他JQuery插件一起使用。 它将为使用最受欢迎的JQuery库创建单页应用程序提供...

Global site tag (gtag.js) - Google Analytics