表单输入验证和鼠标移动表格的颜色改变

验证的表单:

<form action="emp_insert_do.jsp?cp&ls" method="post" onSubmit="return validate(this)" enctype="multipart/form-data">
<table border="1" width="100%" cellpadding="5" cellspacing="0" bgcolor="F2F2F2">
	<tr onMouseOver="changeColor(this,'white')" onMouseOut="changeColor(this,'F2F2F2')">
		<td colspan="4">
			<h1>增加新雇员</h1>		</td>
	</tr>
	<tr onMouseOver="changeColor(this,'white')" onMouseOut="changeColor(this,'F2F2F2')">
		<td><font size="2">雇员编号:</font></td>
		<td><input type="text" name="empno" size="4" maxlength="4" onBlur="validateEmpno(this.value)"></td>
		<td><span id="empno_msg"><font color="RED">*</font></span></td>
		<td rowspan="10">
			<div id="imgPreview" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);width:220px;height:180px;"></div>
		</td>
	</tr>
	<tr onMouseOver="changeColor(this,'white')" onMouseOut="changeColor(this,'F2F2F2')">
		<td><font size="2">雇员姓名:</font></td>
		<td><input type="text" name="ename" onBlur="validateEname(this.value)"></td>
		<td><span id="ename_msg"><font color="RED">*</font></span></td>
	</tr>
	<tr onMouseOver="changeColor(this,'white')" onMouseOut="changeColor(this,'F2F2F2')">
		<td><font size="2">雇员工作:</font></td>
		<td><input type="text" name="job" onBlur="validateJob(this.value)">	</td>
		<td><span id="job_msg"><font color="RED">*</font></span></td>
	</tr>
		<tr onMouseOver="changeColor(this,'white')" onMouseOut="changeColor(this,'F2F2F2')">
		<td><font size="2">领    导:</font></td>
		<td>
			<select name="mgr">
				<option value="0">没有领导</option>
				<%
					List<Emp> allemp=(List<Emp>)map.get("allemp");
					Iterator<Emp> iter= allemp.iterator();
					
					while(iter.hasNext()){
						Emp emp=iter.next();
				 %>
				 
				 	<option value="<%=emp.getEmpno() %>"><%=emp.getEname() %></option>
				
				<%
					}
				 %>
			</select>
		</td>
		<td><span id="job_msg"><font color="RED">*</font></span></td>
	</tr>
	<tr onMouseOver="changeColor(this,'white')" onMouseOut="changeColor(this,'F2F2F2')">
		<td><font size="2">部    门:</font></td>
		<td>
			<select name="dept">
				<option value="0">没有领导</option>
				<%
					List<Dept> alldept=(List<Dept>)map.get("alldept");
					Iterator<Dept> iterdept=alldept.iterator();
					
					
					
					int deptno=0;
					
					try{      //做一判断如如果deptno参数为空的时候,就不执行下面的语句
					deptno=Integer.parseInt(request.getParameter("deptno"));
				
					}catch(Exception e){
					
						
					}
					
					
					while(iterdept.hasNext()){
						Dept dept=iterdept.next();
						
				 %>
				 
				 	<option value="<%=dept.getDeptno() %>" <%=dept.getDeptno().equals(deptno)?"selected":"" %>><%=dept.getDname() %></option>
				
				<%
						}
					
				 %>
			</select>
		</td>
		<td><span id="job_msg"><font color="RED">*</font></span></td>
	</tr>
	<tr onMouseOver="changeColor(this,'white')" onMouseOut="changeColor(this,'F2F2F2')">
		<td><font size="2">雇佣日期:</font></td>
		<td><INPUT TYPE="text" NAME="hiredate" οnclick='popUpCalendar(this,this, "yyyy-mm-dd")' size="15" maxlength="15" readonly="readonly" onBlur="validateHiredate(this.value)"></td>
		<td><span id="hiredate_msg"><font color="RED">*</font></span></td>
	</tr>
	<tr onMouseOver="changeColor(this,'white')" onMouseOut="changeColor(this,'F2F2F2')">
		<td><font size="2">基本工资:</font></td>
		<td><input type="text" name="sal" onBlur="validateSal(this.value)"></td>
		<td><span id="sal_msg"><font color="RED">*</font></span></td>
	</tr>
	<tr onMouseOver="changeColor(this,'white')" onMouseOut="changeColor(this,'F2F2F2')">
		<td><font size="2">雇佣奖金:</font></td>
		<td><input type="text" name="comm" onBlur="validateComm(this.value)"></td>
		<td><span id="comm_msg"><font color="RED">*</font></span></td>
	</tr>
	<tr onMouseOver="changeColor(this,'white')" onMouseOut="changeColor(this,'F2F2F2')">
		<td><font size="2">雇员照片:</font></td>
		<td><input type="file" name="pic" onChange="Preview(this)"></td>
		<td><span id="file_msg"><font color="RED">*</font></span></td>	
	</tr>
	<tr onMouseOver="changeColor(this,'white')" onMouseOut="changeColor(this,'F2F2F2')">
		<td colspan="3"><font size="2">雇员简介:</font></td>
	</tr>
	
	<tr onMouseOver="changeColor(this,'white')" onMouseOut="changeColor(this,'F2F2F2')">
		<td colspan="4">
			<div class="editor">
				<textarea id="note" name="note" style="width:650px;height:200px;visibility:hidden;">
					
				</textarea>
			</div>
		</td>
	</tr>
	<tr onMouseOver="changeColor(this,'white')" onMouseOut="changeColor(this,'F2F2F2')">
		<td colspan="4">
			<input type="hidden" name="cp" value="<%=request.getParameter("cp")%>">
			<input type="hidden" name="ls" value="<%=request.getParameter("ls")%>">
			<input type="submit" value="注册">
			<input type="reset" value="重置">		</td>
	</tr>
</table>
</form>

javascript脚本对输入的内容进行验证:

function validateEmpno(empno){
	if(!(/\d{4}/.test(empno))){
		document.getElementById("empno_msg").innerHTML = "<img src=\""+url+"/images/wrong.gif\">" + "<font color=\"red\">雇员编号必须是四位的数字!</font>" ;
		return false ;
	} else {
		document.getElementById("empno_msg").innerHTML = "<img src=\""+url+"/images/right.gif\">" + "<font color=\"green\">雇员编号输入正确!</font>" ;
		return true ;
	}
}
function validateEname(ename){
	if(ename == ""){
		document.getElementById("ename_msg").innerHTML = "<img src=\""+url+"/images/wrong.gif\">" + "<font color=\"red\">雇员姓名不能为空!</font>" ;
		return false ;
	} else {
		document.getElementById("ename_msg").innerHTML = "<img src=\""+url+"/images/right.gif\">" + "<font color=\"green\">雇员姓名输入正确!</font>" ;
		return true ;
	}
}
function validateJob(job){
	if(job == ""){
		document.getElementById("job_msg").innerHTML = "<img src=\""+url+"/images/wrong.gif\">" + "<font color=\"red\">雇员工作不能为空!</font>" ;
		return false ;
	} else {
		document.getElementById("job_msg").innerHTML = "<img src=\""+url+"/images/right.gif\">" + "<font color=\"green\">雇员工作输入正确!</font>" ;
		return true ;
	}
}
function validateHiredate(hiredate){
	if(!(/\d{4}-\d{2}-\d{2}/.test(hiredate))){
		document.getElementById("hiredate_msg").innerHTML = "<img src=\""+url+"/images/wrong.gif\">" + "<font color=\"red\">雇佣日期输入错误!</font>" ;
		return false ;
	} else {
		document.getElementById("hiredate_msg").innerHTML = "<img src=\""+url+"/images/right.gif\">" + "<font color=\"green\">雇佣日期输入正确!</font>" ;
		return true ;
	}
}
function validateSal(sal){
	if(!(/\d+.?\d*/.test(sal))){
		document.getElementById("sal_msg").innerHTML = "<img src=\""+url+"/images/wrong.gif\">" + "<font color=\"red\">基本工资必须是数字!</font>" ;
		return false ;
	} else {
		document.getElementById("sal_msg").innerHTML = "<img src=\""+url+"/images/right.gif\">" + "<font color=\"green\">基本工资输入正确!</font>" ;
		return true ;
	}
}
function validateComm(comm){
	if(!(/\d+.?\d*/.test(comm))){
		document.getElementById("comm_msg").innerHTML = "<img src=\""+url+"/images/wrong.gif\">" + "<font color=\"red\">奖金必须是数字!</font>" ;
		return false ;
	} else {
		document.getElementById("comm_msg").innerHTML = "<img src=\""+url+"/images/right.gif\">" + "<font color=\"green\">奖金输入正确!</font>" ;
		return true ;
	}
}

function validate(f){
	return	validateEmpno(f.empno.value) && 
			validateEname(f.ename.value) && 
			validateJob(f.job.value) && 
			validateHiredate(f.hiredate.value) && 
			validateSal(f.sal.value) && 
			validateComm(f.comm.value) ;
}

鼠标在表格的上面和没在上面时候,对其颜色进行改变:

<script language="javascript">
		function changeColor(obj,color){
			obj.bgColor = color ;
		}

	</script>




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

q1054261752

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值