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>


 

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

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

js+html 实现关系拓扑图

最近要做一个功能。需要用到关系拓扑图。做了一些调研。发现相关插件很多接下来做个分析 1.yWorks 德国人做的。支持jAjax,html ,php。 官网 https://www.yworks.co...
  • wx5701619
  • wx5701619
  • 2017年08月03日 15:04
  • 7271

js+html实现的考试系统

JavaScript在线考试系统
  • asdfzjs
  • asdfzjs
  • 2014年08月05日 15:30
  • 3604

前端js+html实现简单验证码

前些日子接触到一个项目,要求实现一个简单的验证码,参考万能的百度结合自己的想法实现了一个简单的前端验证码,当然跟后台的不能比安全性, 页面部分: 验证码 id="Yzm" style="width: ...
  • gjq1993
  • gjq1993
  • 2017年02月14日 09:15
  • 1065

使用js实现表单提交

Name:                                                                                           ...
  • zhao13083837081
  • zhao13083837081
  • 2016年08月03日 11:00
  • 1637

JS+html 实现select二级联动菜单

//定义 城市 数据数组 cityArray = new Array(); cityArray[0] = new Array("河南省","郑州市|开封市|洛阳市|平顶山市|安阳市|鹤壁市|新乡市|焦...
  • u011701534
  • u011701534
  • 2013年10月24日 14:43
  • 7124

利用javaScript实现前端表单验证

有什么可以交流的地方请留言,谢谢了 学友分享网-注册个人资料 注册 成为学友分享网的会员 账号: ...
  • snakeMoving
  • snakeMoving
  • 2016年11月05日 17:05
  • 1602

Ajax实现提交form表单

保存数据到服务器,成功时显示信息。 jQuery 代码: $.ajax({ type: "POST", url: "some.php", data: "name=John&l...
  • qq_28292937
  • qq_28292937
  • 2016年07月15日 14:53
  • 1255

工作流管理系统开发之十三 流程与电子表单集成之事件实现篇

一般工作流管理系统分为,流程引擎,电子表单系统(自定义表单),流程设计器,流程管理监控平台等主要模块。流程引擎和电子表单系统应该是弱耦合的,各自都能独立的完成功能。   同时流程引擎和电子表单...
  • LikeLaura
  • LikeLaura
  • 2016年10月14日 19:10
  • 573

javaWeb(一)---html表单

Title
  • MyLoveyaqiong
  • MyLoveyaqiong
  • 2016年05月14日 09:41
  • 833
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js+html实现表单
举报原因:
原因补充:

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