js+html实现表单

原创 2012年03月22日 18:38:18
    <html>
     <head>
      <title>教学质量投票系统</title>
     <script type="text/javascript"> 
    <!--
    //表单
      //用户名
     function match(){
      var exp= /^[\u4e00-\u9fa5]{2,4}$/;
      var mm = document.getElementById("ren").value;
      aa(mm);
      function aa(people){
      var result = people.match(exp);
      if(!result){
       alert("投票人错误");
       }
      }
     //编号
      var exp = /^\w+$/;
      var ren = document.getElementById("renno").value;
      kk(ren);
      function kk(peopleno){
       var result = peopleno.match(exp);
      if(!result){
       alert("投票人编号错误");
       }
      }
     //日期
      var exp = /^(\d{4})-(\d{1,2})-(\d{1,2})$/;
      var hiredate = document.getElementById("hiredate").value;
      ww(hiredate);
      function ww(hired){
       var result = hired.match(exp);
      if(!result){
       alert("投票人日期输入错误");
       } 
       }
      }
    //楼,房间
    var rooms = new Array(4);
    rooms["A1"] = ["A1001", "A1002", "A1003", "A1004", "A1005"];
    rooms["A2"] = ["A2001", "A2002", "A2003", "A2004", "A2005"];
    rooms["A3"] = ["A3001", "A3002", "A3003", "A3004", "A3005"];
    rooms["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.options[i] = new Option(optionList[i], optionList[i]);
    }
    
    //隐藏与显示问题
    
    function doClick(){
     
    var jsomObj = {"wtsm":"你对本次教学安排是否满意","wtlx":"radio","xxnr":{"a1":"满意","a2":"不满意"},"xxgs":2};
    var jsonObj ={"wtsm":"你都了解了哪些内容","wtlx":"checkbox","xxnr":{"a1":"DOM","a2":"BOM","a3":"AJAX"},"xxgs":3};
    var jsonobj = {"wtsm":"你的感想","wtlx":"textarea","cols":50 ,"rows":5};

    var q=document.getElementById("answer1")
    q.innerHTML="<p>"+ jsomObj.wtsm+"</p>"+"<input type="+jsomObj.wtlx+" "+"name="+jsomObj.xxgs+">"+jsomObj.xxnr.a1+"<input type="+jsomObj.wtlx+" "+"name="+jsomObj.xxgs+">"+jsomObj.xxnr.a2+"<br>";
    q.innerHTML=q.innerHTML+"<p>"+ jsonObj.wtsm+"</p>"+"<input type="+jsonObj.wtlx+" "+"name="+jsonObj.xxgs+">"+jsonObj.xxnr.a1+"<input type="+jsonObj.wtlx+" "+"name="+jsomObj.xxgs+">"+jsonObj.xxnr.a2+"<input type="+jsonObj.wtlx+" "+"name="+jsomObj.xxgs+">"+jsonObj.xxnr.a3+"<br>";
    q.innerHTML=q.innerHTML+"<p>"+ jsonobj.wtsm+"</p>"+"<"+jsonobj.wtlx+" "+"cols="+jsonobj.cols+" "+"rows="+jsonobj.rows+">";
      
       if(document.getElementById('answer1').style.display == 'none'){
            document.getElementById('answer1').style.display = '';
            document.testform.button.value ="隐藏问题";
          }else{
           document.getElementById('answer1').style.display = 'none';
            document.testform.button.value ="显示问题";
          }
    }      
    -->
     
    </script>
    
     </head>
     <body>
      <center>
      <form name="testform" id="testform" action="#" method="get">
       <table align="center" width="40%" border="1px"  bordercolor="yellow" bgcolor="blur" style="BORDER-COLLAPSE: collapse">
        <tr><td width="50%">投票人*</td><td width="50%"><input type="text" id="ren" name="ren" value=""/></td></tr>
        <tr><td width="50%">投票人编号*</td><td width="50%"><input type="text" id="renno" name="renno" value=""/></td></tr>
        <tr><td width="50%">日期*</td><td width="50%"><input type="text" id="hiredate" name="hiredate" value=""/></td></tr>
        <tr><td width="50%">投票地点*</td>
         <td width="50%">
          <select>
           <option  selected="selected">中国</option>
           <option>日本</option>
          </select>
         </td>
        </tr>
        <tr>
         <td width="50%">性别</td>
         <td><input type="radio" name="sex" value="boy" checked="checked"/>男
           <input type="radio" name="sex" value="girl"/>女</td>
        </tr>
        <tr>
         <td width="50%">所在楼*</td>
         <td>
          <select  name="country" id="country" onchange="addOptions(rooms[this.options[this.selectedIndex].text],document.testform.room);">
           <option>A1</option>
           <option>A2</option>
           <option>A3</option>
           <option>A4</option>
          </select>
         </td>
        </tr>
       <tr>
         <td width="50%">所在房间*</td>
         <td width="50%">
          <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 colspan="2" id="answer" onclick="doClick()">
          <input type="button" name="button" value="显示问题">
          </td>
        </tr>
        <tr> 
         <td colspan="2" id = "answer1" style="display:none;">
          <table width="100%" border="1">
             </table>
           </td>
         </tr>

        <tr>
         <td colspan="2">
          <center><input type="button" name="tijiao" value="提交" onclick="match()" /></center>
         </td>
        </tr>
       </form>
      </table>
     </center>
     </body>
    </html>


 

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

html+js实现form表单多值的验证

实现form表单同时验证多条数据。 1.html部分与js缩进有些不太一样,不影响内容 2.截图没传上去,请自行复制代码查看 注意:需要验证的内容写到最上面,不然会因为中间有不需要验证的内容而报...

js+html实现表单上传word等文件

先是js部分。 我在其中写了登录验证部分,可以根据需求增删。(其中 swal()是调用了sweetAlert插件的方法,详见http://www.dglives.com/demo/sweetaler...

用js动态添加登录表单并完成提交实现在html注册后自动登录

注册的表单提交和数据同样是在html间完成的,为此单独写了register.html来处理index页面提交过来的注册表单数据。                         v...

【笔记】 《js权威指南》- 第15章 脚本化文档 - 15.9 HTML表单

【JS】【客户端】脚本化Web文档 —— HTML表单

HTML表单元素 HTNL元素 类型属性 事件处理程序 描述和事件 或 "button" onclick 按钮 "checkbox" onc...

用js给html表单设置style

原贴地址:http://heichong.iteye.com/blog/860698关键字: 用js给html表单设置style 首先,把CSS和JS标签style属性对照表了解了: CSS...
  • rztyfx
  • rztyfx
  • 2012-07-02 00:30
  • 3798
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)