您的位置:首页 > 其它

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

2015-11-08 16:55 363 查看
验证的表单:

<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" onclick='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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: