黑马程序员技术交流社区

标题: 怎么样才能重置file框 [打印本页]

作者: 郭俊    时间: 2013-1-5 23:59
标题: 怎么样才能重置file框
本帖最后由 郭俊 于 2013-7-21 11:48 编辑
  1. <html>
  2.     <head>
  3.         <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4.         <title>网页布局的验证</title>
  5.         <script type="text/javascript">
  6.             //验证表单不能为空
  7.             function validateForm(){
  8.                 //验证用户名   
  9.                 var usernameNode = byId("username");
  10.                 //判断值是否为空
  11.                 if ("" == usernameNode.value) {
  12.                     alert("用户名不能为空");
  13.                     //获得焦点
  14.                     usernameNode.focus();
  15.                     return ;
  16.                 }
  17.                 //验证密码
  18.                 var passwordNode = byId("password");
  19.                 if ("" == passwordNode.value) {
  20.                     alert("密码不能为空");
  21.                     //获得焦点
  22.                     passwordNode.focus();
  23.                     return ;
  24.                 }      
  25.                 //性别不能为空,怎么做
  26.                 var sexs = byName("sex");
  27.                 //定义统计变量
  28.                 var sexCount = 0;
  29.                 for (var x = 0; x < sexs.length; x++) {
  30.                     if (sexs[x].checked) {
  31.                         sexCount++;
  32.                     }
  33.                 }
  34.                 if (sexCount == 0) {
  35.                     alert("请选择性别");
  36.                     return ;
  37.                 }   
  38.                 //爱好不能为空
  39.                 var likes = byName("likes");
  40.                 var likeCount = 0;
  41.                 for (var x = 0; x < likes.length; x++) {
  42.                     if (likes[x].checked) {
  43.                         likeCount++;
  44.                     }
  45.                 }
  46.                 if (likeCount == 0) {
  47.                     alert("请选择爱好");
  48.                     return ;
  49.                 }
  50.                 //判断下拉框
  51.                 var provinceNode = byId("province");
  52.                 if ("none" == provinceNode.value) {
  53.                     alert("请选择省份");
  54.                     provinceNode.focus();
  55.                     return ;
  56.                 }
  57.                 //判断个人介绍
  58.                 var myselfNode = byId("myself");
  59.                 if(""==myselfNode.value)
  60.                 {
  61.                     alert("个人介绍不能为空");
  62.                     myselfNode.focus();
  63.                     return ;
  64.                 }
  65.                 //判断图片框
  66.                 var fileNode = byId("file");
  67.                 if(""==fileNode.value)
  68.                 {
  69.                     alert("上传图片不能为空");
  70.                     fileNode.focus();
  71.                     return ;   
  72.                 }
  73.                 //最后我在这里进行提交
  74.                 //获取表单form的名称
  75.                 var formNode = byId("myform");
  76.                 //更改服务器的地址
  77.                 formNode.action = "test.html";
  78.                 //提交表单
  79.                 formNode.submit();
  80.             }
  81.             //根据id得到对象
  82.             function byId(id)
  83.             {
  84.                 return document.getElementById(id);
  85.             }           
  86.             //根据name得到对象数组
  87.             function byName(name)
  88.             {
  89.                 return document.getElementsByName(name);
  90.             }
  91.             function resetEvent()
  92.             {
  93.                 //用户名
  94.                 byId("username").value="";
  95.                 //密码
  96.                 byId("password").value="";
  97.                 //性别
  98.                 byId("man").checked = false;
  99.                 byId("woman").checked = false;
  100.                 //爱好
  101.                 byId("study").checked = false;
  102.                 byId("think").checked = false;
  103.                 byId("test").checked = false;
  104.                 //省份
  105.                 byId("province").value = "none";
  106.                 //个人介绍
  107.                 byId("myself").value = "";
  108.                 <b><u><i>byId("file").outerHTML = "<input type='file' name='file' id='file'/>";</i></u></b>
  109.             }
  110.         </script>
  111.     </head>
  112.     <body>
  113.         <form action="success.html" method="post" id="myform">
  114.             <table border="1" width="40%" align="center" background="mn.jpg">
  115.                 <caption>用户注册</caption>
  116.                 <tr>
  117.                     <td width="30%">用户名:</td>
  118.                     <td width="70%"><input type="text" name="username" id="username" /></td>
  119.                 </tr>
  120.                 <tr>
  121.                     <td>密码:</td>
  122.                     <td><input type="password" name="password" id="password" /></td>
  123.                 </tr>
  124.                 <tr>
  125.                     <td>性别:</td>
  126.                     <td>
  127.                         <input type="radio" name="sex" id="man" value="男" />男
  128.                         <input type="radio" name="sex" id="woman" value="女" />女
  129.                     </td>
  130.                 </tr>
  131.                 <tr>
  132.                     <td>爱好:</td>
  133.                     <td>
  134.                         <input type="checkbox" name="likes" id="study" value="学习" />学习
  135.                         <input type="checkbox" name="likes" id="think" value="思考" />思考
  136.                         <input type="checkbox" name="likes" id="test"  value="练习"/>练习
  137.                     </td>
  138.                 </tr>
  139.                 <tr>
  140.                     <td>省份:</td>
  141.                     <td>
  142.                         <select name="province" id="province">
  143.                             <option value="none">--请选择--</option>
  144.                             <option value="湖北省">湖北省</option>
  145.                             <option value="湖南省">湖南省</option>
  146.                             <option value="山东省">山东省</option>
  147.                             <option value="山西省">山西省</option>
  148.                         </select>
  149.                     </td>
  150.                 </tr>
  151.                 <tr>
  152.                     <td valign="top">个人介绍:</td>
  153.                     <td>
  154.                         <textarea name="myself" id="myself" rows="10" cols="40"></textarea>
  155.                     </td>
  156.                 </tr>
  157.                 <tr>
  158.                     <td>上传图片:</td>
  159.                     <td><input type="file" name="file" id="file"/></td>
  160.                 </tr>
  161.                 <tr>
  162.                     <td colspan="2" align="center">
  163.                         <input type="button" value="注册" onclick="validateForm()" />
  164.                         <input type="button" value="重置" onclick="resetEvent()" />
  165.                     </td>
  166.                 </tr>
  167.             </table>
  168.         </form>
  169.     </body>
  170. </html>
复制代码
这个重置按钮,重置图片除了这种做法还有别的吗?


作者: 罗利华    时间: 2013-1-6 16:52
可以的,你在javascript中定义的resetEvent()函数删除,
把这句代码<input type="button" value="重置" onclick="resetEvent()" />
修改为:<input type="reset" value="重置" />就行了,
type指定类型为reset,它是意思就是清除表单中所有的数据。
作者: 郭俊    时间: 2013-1-6 18:34
修心者 发表于 2013-1-6 16:52
可以的,你在javascript中定义的resetEvent()函数删除,
把这句代码
修改为:就行了,

  嗯  可以的  谢谢啊
作者: 罗利华    时间: 2013-1-7 00:36
郭俊 发表于 2013-1-6 18:34
嗯  可以的  谢谢啊

不用客气,




欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2