联动显示隐藏+部分验证实例

最新推荐文章于 2020-08-15 11:48:37 发布

yangxiaojun9238

最新推荐文章于 2020-08-15 11:48:37 发布

阅读量704

点赞数

分类专栏： JAVASCRIPT学习笔记文章标签：投票系统 input function border xhtml ajax

本文链接：https://blog.csdn.net/yangxiaojun9238/article/details/7319551

版权

JAVASCRIPT学习笔记专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<!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>

yangxiaojun9238

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
联动显示隐藏+部分验证实例

HTML+CSS+JAVASCRIPTth{background-color:#FF9933}td{background-color:#99CCFF;}textarea{background-color:#339999}input{background-color:#99CCFF} <!-- var cities
复制链接

扫一扫