项目中JS函数的写法

于 2011-06-19 00:36:18 发布
阅读量164 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： J2EE前端设计 文章标签： 项目管理 Ajax JSP HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/iteye_20539/article/details/82076549 

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ include  file="/WEB-INF/view/include/include.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
	    <title>index page</title>
	    <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
	    <Script Language="javaScript" src="<c:out value="${path}" />/jsLibs/form/formEdit/formEdit.js"></Script>
	    <Script Language="javaScript" src="<c:out value="${path}" />/jsLibs/form/attachFile/attachFile.js"></Script>
	    <Script Language="javaScript" src="<c:out value="${path}" />/jsLibs/msgBox/msgBox.js"></Script>
	    <title>注册页面</title>
	    <style>
	        .zhuceTable{
	             width:979px;
	             height:700px;
	             padding: 0px;
	             background-color: #FFFFFF;
	             margin: 0px auto 0px auto;
	         }
	        .zhuceTable .logoTd{
				height:47px;
				width:241px;
	  		}
	        .zhuceTable .topTd{
	            background-image:url(<c:out value="${path }"/>/images/register/zhuce_1.gif);
	            width:100%;
	            height: 59px;
	            padding:2  0 0 70;
	            font-size:20px;
	            color:white;
	            font-weight:bold;
	         }
	        .zhuceTable .centerTd{
	            height:100%;
	            background-image: url(<c:out value="${path }"/>/images/register/zhuce_2.gif);
				width:100%;
	         }
	        .zhuceTable .bottomTd{
	            height:16px;
	            background-image: url(<c:out value="${path }"/>/images/register/zhuce_4.gif);
	         }
	        .conTable{
				width:878px;	        
	        }
			.titleTd{				
				width:878px;				
				height:45px;
				background-image: url("<c:out value="${path }"/>/images/register/zhuce_3.jpg") ;
				background-repeat:no-repeat;
				padding:0 0 5 30;
				color:#117daf;
				font-size:15px;
				font-weight:bold;
			}
			.xtd{
				text-align:right;
				width:500px;
				height:40px;
			}
			.ytd{
				width:320px;
				font-size:12px;
				color:navy;
				padding:0 0 0 40px;
			}
			.ztd{
				height:20px;
			}
			.std{
				height:50px;
				text-align:center;
				padding:40 0 0 0;
			}
			.rtd{
				width:3px;
			}
			#commit{
			    background: url("<c:out value="${path }"/>/images/register/zhuceButton.jpg");
				height:39px;
				width:114px;
				border:0px;
			}
			input{
				border:1px solid #117daf;
				background-color:white;	
			}
			img{
				vertical-align:middle;
			}
			label{
				vertical-align:middle;
			}
		</style>
	</head>
    <body style="background-color:white; overflow:auto;">
    	<center>
        <table cellpadding="0" cellspacing="0" border="0" class="zhuceTable">
			<tr>
				<td class="logoTd" style="padding:5 0 15 15;"><img src="<c:out value="${path }"/>/images/register/BYD_logo.jpg"></td>
			</tr>
            <tr>
                <td class="topTd" >欢迎注册实验室信息管理平台</td>
            </tr>
            <tr>
                <td class="centerTd" valign="top">
					<form id="regForm" name="regForm" class="sun_optionForm"  method="post" 
						action="<c:out value="${path}"/>/register.htm?method=userSave">
						<center>
							<table cellpadding="0" cellspacing="0" border="0" class="conTable">
									<tr ><td class="ztd" colspan="3"></td></tr>
									<tr>
										<td class="titleTd" colspan="3">创建您的帐号</td>
									</tr>
									<tr>
										<td class="xtd">登录帐号：
											<input type="text" id="userNo" name="userNo"  vtype="onlyChar"  vminLength="6" 
											vUpperCase="true"  vmaxlength="20" vnotNull style="height:26px;width:250px" >										
										</td>
										<td class="rtd"><font color="red" size="3px">*<font></td>
										<td class="ytd" id="obj">请输入6~20个字符（数字、字母、特殊符号）不区分大小写！</td>
									</tr>
									<tr>
										<td class="xtd">用户密码：
											<input type="password" id="userPassword" name="userPassword" vminLength="6" vnotNull vmaxlength="20" style="height:26px;width:250px">										
										</td>
										<td class="rtd"><font color="red" size="3px">*<font></td>
										<td class="ytd" id="objTd1">请输入6~20个字符（数字、字母、特殊符号）区分大小写！</td>
									</tr>	
									<tr>
										<td class="xtd">密码确认：
											<input type="password" id="reUserPassword"  vminLength="6"  vnotNull style="height:26px;width:250px">
										</td>
										<td class="rtd"><font color="red" size="3px">*<font></td>
										<td class="ytd" id="objTd2">请再输入一次密码！</td>
									</tr>	
									<tr ><td class="ztd"></td></tr>
									<tr>
										<td class="titleTd" colspan="3">填写您的基本信息</td>
									</tr>
								<tr>
									<td class="xtd">产业群：
										<select id="productNo" name="productNo" vdefaultvalue="汽车产业群" onchange="indexFun.proChange()" style="height:26px;width:250px">
										<c:forEach var="productInfo" items="${productInfo}">						
											<option value="${productInfo.productNo}"><c:out value="${parameter['PRODUCTS'][productInfo.productNo]}" /></option>
										</c:forEach>													
										</select>										
									</td>
									<td class="rtd"></td>									
									<td class="ytd">选择您所属的产业群！</td>
								</tr>
								<tr>
									<td class="xtd">事业部：
										<select id="divisionNo" name="divisionNo" onchange="indexFun.divChange()" style="height:26px;width:250px">
										<c:forEach var="divisionInfo" items="${divisionInfo}">						
											<option value="${divisionInfo.division.id}"><c:out value="${divisionInfo.groupName}"/></option>
										</c:forEach>
										</select>
									</td>
									<td class="rtd"></td>
									<td class="ytd">选择您所属的事业部！</td>
								</tr>
								<tr>
									<td class="xtd">用户群组：
										<input type="hidden" id="groupId" name="groupId" vnotNull />
										<input type="text" id="groupName" name="groupName" vnotNull style="height:26px;width:250px" onclick="indexFun.group()"/>										
									</td>
									<td class="rtd"><font color="red" size="3px">*<font></td>
									<td class="ytd">选择您所属的用户群组！</td>
								</tr>				
								<tr>
									<td class="xtd">成本中心：
										<input type="text" id="costCenter" name="costCenter" style="height:26px;width:250px" readonly="readonly">									
									</td>
									<td class="rtd"></td>
									<td class="ytd">填写您的成本中心代码！</td>
								</tr>
								<tr ><td class="ztd"></td></tr>
								<tr>
									<td class="titleTd" colspan="3">输入您的个人信息</td>
								</tr>
								<tr>
									<td class="xtd">工号：
										<input type="text" id="perNo" name="perNo" vtype="onlyChar" vUpperCase="true" vmaxlength="10" vnotNull style="height:26px;width:250px">								
									</td>
									<td class="rtd"><font color="red" size="3px">*<font></td>
									<td class="ytd" id="objTd3">请输入您的工号！</td>
								</tr>				
								<tr>
									<td class="xtd">用户姓名：
										<input type="text" id="userName" name="userName" vnotNull style="height:26px;width:250px">
									</td>
									<td class="rtd"><font color="red" size="3px">*<font></td>
									<td class="ytd">请输入您的真实姓名！</td>
								</tr>											
								<tr>
									<td class="xtd">座机：
										<input type="text" id="phone" name="phone" vnotNull vtype="tel" vmaxlength="10" style="height:26px;width:250px">
									</td>
									<td class="rtd"><font color="red" size="3px">*<font></td>
									<td class="ytd">请输入您的联系方式，请填写办公室座机！</td>
								</tr>
								<tr>
									<td class="xtd">手机：
										<input type="text" id="tel" name="tel" vtype="tel" vmaxlength="11" style="height:26px;width:250px">
									</td>
									<td class="rtd"></td>
									<td class="ytd">请输入您的联系方式，请填写11位手机长号！</td>
								</tr>										
								<tr>
									<td class="xtd">邮箱：
										<input type="text" id="email" name="email" vtype="email" vnotNull style="height:26px;width:250px">									
									</td>
									<td class="rtd"><font color="red" size="3px">*<font></td>
									<td class="ytd">请填写您的个人邮箱，此项很重要请谨慎填写！</td>
								</tr>										
								<tr>
									<td class="xtd">备注：
										<textarea  id="memo" name="memo" ROWS="3" COLS="30" style="width:250px"></textarea>
									</td>
									<td class="rtd"></td>
									<td class="ytd">请填写个人信息简介！</td>
								</tr>
								<tr>			
									<td colspan="3" class="std">
									<input type="button" id="commit" onclick="indexFun.saveCommit()">				
									</td>
								</tr>				
							</table>
						</center>
					</form>
                </td>
            </tr>
            <tr>
                <td class="bottomTd"></td>
            </tr>
        </table>
		</center>        
    </body>
</html>

<script language="javaScript">
	var success = "<c:out value="${success}"/>";
	window.onload=function(){
		//indexFun.checkOk();
		$("userNo").value = "";
		indexFun.init();
		//监听onblur事件
		$("userNo").attachEvent("onblur",function(){indexFun.checkUserNo();});
		$("perNo").attachEvent("onblur",function(){indexFun.checkPerNo();});		
		$("userPassword").attachEvent("onblur",function(){indexFun.checkPassword();});		
		$("reUserPassword").attachEvent("onblur",function(){indexFun.checkRePassword();});		
		$("productNo").options[0].selected=true;	
	};
	var indexFun = function(){
		var loading = new org.Loading();
		var msg = new org.msgBox();
		var oForm;
		var node;
		var list;
		return {
			init:function(){
			 	oForm = new org.form.FormEditer("regForm");
			   	oForm.init();
			},
			//checkOk:function(){
			//	if(success=="true"){
			//		msg.showMsg("保存成功！","注册信息已保存，谢谢！");					
			//		window.close();
			//	}else if(success=="false"){
			//		alert("保存失败");
			//		window.history.back();
			//	}
			//},
			checkPassword:function(){
				var userPassword = $("userPassword").value;
				if(userPassword != ""){
					if(userPassword.length < 6 || userPassword.length >20){
						$("objTd1").innerHTML = "<img src='<c:out value="${path}"/>/images/register/no.gif'>  <font color=red>密码设置不符合规则！<font>";
						$("userPassword").value="";	
					}else{
						$("objTd1").innerHTML = "<img src='<c:out value="${path}"/>/images/register/ok.gif'>  <font color=green>密码设置完成！<font>";						
					}
				}else{
					$("objTd1").innerHTML = "<img src='<c:out value="${path}"/>/images/register/no.gif'>  <font color=red>请您设置登录密码！<font>";					
				}
			},
			checkRePassword:function(){
				var reUserPassword = $("reUserPassword").value;
				if(reUserPassword != ""){
					if(reUserPassword.length < 6 || reUserPassword.length > 20){
						if($("userPassword").value != ""){
							$("objTd2").innerHTML = "<img src='<c:out value="${path}"/>/images/register/no.gif'>  <font color=red>密码长度设置不一致，请重新输入！<font>";	
							$("reUserPassword").value = "";							
						}else{
							$("objTd2").innerHTML = "<img src='<c:out value="${path}"/>/images/register/no.gif'>  <font color=red>请先设置登录密码！<font>";	
							$("reUserPassword").value = "";					
						}					
					}else{
						if($("reUserPassword").value == $("userPassword").value){
							$("objTd2").innerHTML = "<img src='<c:out value="${path}"/>/images/register/ok.gif'>  <font color=green>密码检测通过！<font>";						
						}else{
							$("objTd1").innerHTML = "<img src='<c:out value="${path}"/>/images/register/no.gif'>  <font color=red>请重新设置密码！<font>";
							$("objTd2").innerHTML = "<img src='<c:out value="${path}"/>/images/register/no.gif'>  <font color=red>密码设置不一致，请重新输入！<font>";
							$("userPassword").value = "";
							$("reUserPassword").value = "";										
						}
					}
				}else{
					if($("userPassword").value != ""){
						$("objTd2").innerHTML = "<img src='<c:out value="${path}"/>/images/register/no.gif'>  <font color=red>请您再输入一次密码！<font>";							
					}else{
						$("objTd2").innerHTML = "<img src='<c:out value="${path}"/>/images/register/no.gif'>  <font color=red>请先设置登录密码！<font>";					
					}			
				}						
			},
			checkPerNo:function(){
				var perNo = $("perNo").value;			
				if(perNo != ""){
					//显示进度条
		  			loading.start();
					var XMLHttpRequest = new org.XMLHttpRequest();				
					XMLHttpRequest.type = "txt";
					XMLHttpRequest.rtnFunction = function(ajax){
						if(ajax.responseText=="true"){
							$("objTd3").innerHTML = "<img src='<c:out value="${path}"/>/images/register/ok.gif'>  <font color=green>恭喜你，工号检测通过！<font>";												
						}else{
							$("objTd3").innerHTML = "<img src='<c:out value="${path}"/>/images/register/no.gif'>  <font color=red>该工号已经注册了，请重新输入！<font>";						
							$("perNo").value = "";
						}
						//进度条消失
		  				loading.end();										
					}
					XMLHttpRequest.catchException =	function(ex,ajax){
						alert(ex.message);
						//进度条消失
		  				loading.end();						
					}
					XMLHttpRequest.param = {perNo:perNo};
					XMLHttpRequest.url = "<c:out value="${path}"/>/register.htm?method=checkPerNo&dataTime="+(new Date()).getTime();					
					XMLHttpRequest.load();											 	
				}else{
					$("objTd3").innerHTML = "<img src='<c:out value="${path}"/>/images/register/no.gif'>  <font color=red>请输入您的工号！<font>";				
				}
			},						
			checkUserNo:function(){
				var userNo = $("userNo").value;			
				if(userNo != ""){
					if(userNo.length < 6 || userNo.length>20){
						$("obj").innerHTML = "<img src='<c:out value="${path}"/>/images/register/no.gif'>  <font color=red><label>登录帐号不符合设置规则！</label><font>";						
					}else{
						//显示进度条
			  			loading.start();
						var XMLHttpRequest = new org.XMLHttpRequest();				
						XMLHttpRequest.type = "txt";
						XMLHttpRequest.rtnFunction = function(ajax){
							if(ajax.responseText=="true"){
								$("obj").innerHTML = "<img src='<c:out value="${path}"/>/images/register/ok.gif'>  <font color=green>恭喜你，用户帐号未被占用！<font>";												
							}else{
								$("obj").innerHTML = "<img src='<c:out value="${path}"/>/images/register/no.gif'>  <font color=red>帐号已经被占用了，请重新输入！<font>";						
								$("userNo").value = "";
							}
							//进度条消失
			  				loading.end();										
						}
						XMLHttpRequest.catchException =	function(ex,ajax){
							alert(ex.message);
							//进度条消失
			  				loading.end();						
						}
						XMLHttpRequest.param = {userNo:userNo};
						XMLHttpRequest.url = "<c:out value="${path}"/>/register.htm?method=checkUserNo&dataTime="+(new Date()).getTime();					
						XMLHttpRequest.load();					
					}											 	
				}else{
					$("obj").innerHTML = "<img src='<c:out value="${path}"/>/images/register/no.gif'>  <font color=red>请设置登录帐号！<font>";				
				}
			},
			proChange:function(){
				$("groupName").value="";
				$("groupId").value="";
				//显示进度条
		  		loading.start();				
				var proNo = $("productNo").value;
				var XMLHttpRequest = new org.XMLHttpRequest();				
				XMLHttpRequest.type = "txt";
				XMLHttpRequest.rtnFunction = function(ajax){				
					var divNo,divName;
					var sel = document.getElementById("divisionNo");					
					sel.options.length=0;					
					var dataStr = ajax.responseText;  //从java文件传回的值
					var divInfo = eval(dataStr);				
					for(var i=0;i<divInfo.length;i++){
						var subDivInfo=divInfo[i];
						divNo = subDivInfo.divisionNo;							
						divName = subDivInfo.divisionName;
						sel.add(new Option(divName,divNo));    
					}
					//进度条消失
	  				loading.end();									
				}
				XMLHttpRequest.catchException =	function(ex,ajax){
					alert(ex.message);
					//进度条消失
	  				loading.end();						
				}
				XMLHttpRequest.param = {productNo:proNo};
				XMLHttpRequest.url = "register.htm?method=divisionView";					
				XMLHttpRequest.load();		   								
			},
			divChange:function(){
				$("groupName").value="";
				$("groupId").value="";			
			},
			saveCommit:function(){
				if($("costCenter").value==""){
					alert("成本中心号不能为空!");
					return;
				}
				if(oForm.check()){
					if($("userPassword").value == $("reUserPassword").value){				
						document.regForm.submit();					
					}else{
						$("objTd2").innerHTML = "<img src='<c:out value="${path}"/>/images/register/no.gif'>  <font color=red>密码输入不一致，请重新输入！<font>";											
						$("userPassword").value = "";
						$("reUserPassword").value = "";
					}
				}
			},
			group:function(){
				var divisionNo = $("divisionNo").value;			
			    //showx = event.screenX - event.offsetX +200 ; // + deltaX; 
		        //showy = event.screenY - event.offsetY + 20; // + deltaY; 
		        var k = showModalDialog("<c:out value="${path}"/>/register.htm?method=groupView&divisionNo="
		        +divisionNo,window, "dialogWidth:400px; dialogHeight:450px;resizable:yes");
		        if(!(k == null || k.length == 0)){
					document.getElementById("groupId").value = k[0];
					document.getElementById("groupName").value=k[1];
					document.getElementById("costCenter").value=k[2];			        
		        }
			}			
		}
	}(); 	
</script>


评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值