<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>HTML+CSS+JAVASCRIPT</title>
<style type="text/css">
th{
background-color:#FF9933
}
td{
background-color:#99CCFF;
}
textarea{
background-color:#339999
}
input{
background-color:#99CCFF
}
</style>
<script type="text/javascript">
<!--
var cities = new Array(4);
cities["A1"] =
["A1001", "A1002", "A1003", "A1004", "A1005"];
cities["A2"] =
["A2001", "A2002", "A2003", "A2004"];
cities["A3"] = ["A3001", "A3002", "A3003", "A3004"];
cities["A4"] =
["A4001", "A4002", "A4003", "A4004", "A4005"];
function removeOptions(optionMenu)
{
for (var i=0; i < optionMenu.options.length; i++)
optionMenu.options[i] = null;
}
function addOptions(optionList, optionMenu)
{
removeOptions(optionMenu); // clear out the options
for (var i=0; i < optionList.length; i++)
optionMenu[i] = new Option(optionList[i], optionList[i]);
}
function doClick(show)
{
var jsonobj1={"wtsm":"1.你对本次教学的安排是否满意?","wtlx":"radio","xxgs":2,"xxnr":{"r1":"满意","r2":"不满意"}};
var jsonobj2={"wtsm":"2.你都了解了哪些内容?","wtlx":"checkbox","xxgs":3,"xxnr":{"c1":"DOM","c2":"BOM","c3":"AJAX"}};
var jsonobj3={"wtsm":"3.你的感想?","wtlx":"textarea","cols":60,"rows":5};
var s=document.getElementById("show");
s.innerHTML="<td>"+jsonobj1.wtsm+"</td>"+"<hr><input type="+jsonobj1.wtlx+" "+"name="+jsonobj1.xxgs+">"+jsonobj1.xxnr.r1+"<input type="+jsonobj1.wtlx+" "+"name="+jsonobj1.xxgs+">"+jsonobj1.xxnr.r2+"<hr>";
s.innerHTML=s.innerHTML+"<td>"+jsonobj2.wtsm+"</td>"+"<hr><input type="+jsonobj2.wtlx+" "+"name="+jsonobj2.xxgs+">"+jsonobj2.xxnr.c1+"<input type="+jsonobj2.wtlx+" "+"name="+jsonobj2.xxgs+">"+jsonobj2.xxnr.c2+"<input type="+jsonobj2.wtlx+" "+"name="+jsonobj2.xxgs+">"+jsonobj2.xxnr.c2+"<hr>";
s.innerHTML=s.innerHTML+"<td>"+jsonobj3.wtsm+"</td>"+"<hr><"+jsonobj3.wtlx+" "+"cols="+jsonobj3.cols+" "+"rows="+jsonobj3.rows+"/>";
var AX=document.all(show); //声明一个变量
AX.style.display=AX.style.display=="none"?"":"none"; //判断是否隐藏
}
function valicate(){
var no=/^[A-Za-z0-9_]+$/;
var cn = /[^\u4e00-\u9fa5]/;
if(cn.test(document.getElementById("vote").value||document.getElementById("vote").value=="")) {
alert("必须为中文且不能为空!");
document.getElementById("vote").value="";
return false;
}else if(!no.test((document.getElementById("no").value))){
alert("账号只能为数字+字母");
document.getElementById("no").value="";
return false;
}else if(!/^19\d\d-[0-1]\d-[0-3]\d+$/.test((document.getElementById("riqi").value))&&!/^20\d\d-[0-1]\d-[0-3]\d+$/.test((document.getElementById("riqi").value))){
alert("日期格式不正确");
return false;
}
}
//-->
</script>
</head>
<body>
<form name="testform">
<table align="center" border="1" bordercolor="#000000" style="BORDER-COLLAPSE: collapse">
<br />
<br />
<br />
<caption style="color:#000066"><b>教学质量投票系统</b></caption>
<hr color="#000000" />
<tr class="ltable">
<th>
投票人
</th>
<td><input type="text" id="vote" /></td>
<th>
投票人编号
</th>
<td><input type="text" id="no"/></td>
</tr>
<tr>
<th>日期</th>
<td>
<input type="text" id="riqi"/>
</td>
<th>
投票地点
</th>
<td><select name="roo" id="om">
<option>A1001</option>
<option>A1002</option>
<option>A1003</option>
<option>A1004</option>
<option>A1005</option>
</select></td>
</tr>
<tr>
<th>性别</th><td>男<input type="radio" name="sex" value="1" checked="checked"/>
女<input type="radio" name="sex" value="2" /></td><th></th>
<td>
</td>
</tr>
<tr>
<th>所在楼</th>
<td><select name="floor" id="floor"
οnchange="addOptions(cities[this.options[this.selectedIndex].text],
document.testform.room);">
<option selected="selected">A1</option>
<option>A2</option>
<option>A3</option>
<option>A4</option>
</select>
</td>
<th>
所在房间
</td>
<td>
<select name="room" id="room">
<option>A1001</option>
<option>A1002</option>
<option>A1003</option>
<option>A1004</option>
<option>A1005</option>
</select>
</td>
</tr>
<tr><td οnclick="doClick('show')" id="dd">问题请点击显示</td><td></td><td></td><td></td></tr>
<tr><td id="show" style="display:none" colspan="4"><table id="show2" width="100%" border="1" bordercolor="#000000">
</table></td>
<tr><td colspan="4" align="center"><input type="submit" οnclick="valicate()" value="提交"/></td></tr>
</table>
</form>
</body>
</html>
联动显示隐藏+部分验证实例
最新推荐文章于 2023-12-15 13:37:20 发布