黑马程序员技术交流社区

标题: 关于一个javacript的问题 [打印本页]

作者: 曾虓    时间: 2012-4-16 23:32
标题: 关于一个javacript的问题
本帖最后由 岳民喜 于 2012-4-17 14:49 编辑

表单块:
<form id="form1" name="form" onsubmit=“return sub()”  method="post" action="">
这里在html代码中有onsubmit="return sub()",感觉不太好,可不可以把html代码和js完全分离呢。
我试过了,
a可以通过js代码注册onlick。
代码如下,请求牛人支援
html代码:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.         <head>
  4.                 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.                 <title>提交表单</title>
  6.                 <style type="text/css">
  7.                         #form1 ul {
  8.                                 list-style-type: none;
  9.                                 float: left;
  10.                         }
  11.                         #form1 ul li {
  12.                                 margin-top: 5px;
  13.                         }
  14.                         #form1 ul .ggg {
  15.                                 text-align: right;
  16.                                 margin-right: 70px;
  17.                         }
  18.                 </style>
  19.         </head>
  20.         <body>
  21.                 <ul id="imagegallery">
  22.                         <li>
  23.                                 <a href="#">Fireworks</a>
  24.                         </li>
  25.                         <li>
  26.                                 <a href="#">Coffee</a>
  27.                         </li>
  28.                 </ul>
  29.                 <form id="form1" name="form" method="post"  action="">
  30.                         <ul>
  31.                                 <li class="ggg">
  32.                                         <label for="txtName">用户名:</label>
  33.                                         <input type="text" name="username"/>
  34.                                 </li>
  35.                                 <li class="ggg">
  36.                                         <label for="password">密码:</label>
  37.                                         <input type="password" name="password" />
  38.                                 </li>
  39.                                 <li class="ggg">
  40.                                         <label for="repassword">重复密码:</label>
  41.                                         <input type="password" name="repassword" />
  42.                                 </li>
  43.                                 <li>
  44.                                         性别:
  45.                                         <input type="radio" name="sex" value="0" checked="default" />
  46.                                         男
  47.                                         <input type="radio" name="sex" value="1" />
  48.                                         女
  49.                                 </li>
  50.                                 <li>
  51.                                         城市:
  52.                                         <select name="city">
  53.                                                 <option value="0">北京</option>
  54.                                                 <option value="1">上海</option>
  55.                                                 <option value="2">广州</option>
  56.                                                 <option value="3">深圳</option>
  57.                                         </select>
  58.                                 </li>
  59.                                 <li>
  60.                                         兴趣爱好:
  61.                                         <input type="checkbox" name="read" value="0" />
  62.                                         阅读
  63.                                         <input type="checkbox" name="travel" value="1" />
  64.                                         旅游
  65.                                         <input type="checkbox" name="Internet" value="2" />
  66.                                         上网
  67.                                 </li>
  68.                                 <li>
  69.                                         个人简介:                                         <textarea rows="5" cols="30" name="readme"></textarea>
  70.                                 </li>
  71.                                 <li>
  72.                                         <input type="submit" value="提交"/>
  73.                                 </li>
  74.                         </ul>
  75.                 </form>
  76.                 <script type="text/javascript" src="2.js"></script>
  77.         </body>
  78. </html>
复制代码
js代码如下:
  1. /**
  2. * @author Administrator
  3. */
  4. //页面加载时启动函数
  5. function addLoadEvent (func) {
  6.         var onldon = window.onload;
  7.         if ( typeof window.onload !='function') {
  8.           window.onload =func;
  9.         } else{
  10.           window.onload= function(){
  11.             onldon();
  12.             func();
  13.           }
  14.         };
  15. }
  16. //给id为imagegallery 的ul标签的a注册onlick方法,调用showshowPic()
  17. function prepareGallery () {
  18.     var gallery =document.getElementById("imagegallery");
  19.   var links =gallery.getElementsByTagName("a");
  20.   for (var i=0; i < links.length; i++) {
  21.     links[i].onclick=function(){
  22.             showPic(this);
  23.             return false;
  24.     }
  25.   };
  26. }
  27. //函数showPic
  28. function showPic (whichpic) {
  29. }
  30. //表单区验证函数
  31. function sub() {
  32. }
  33. function example () {
  34.   //在此添加上代码,分离html和js文件,给表单onsubmit事件注册sub()方法
  35.   //请帮忙在这里写,实在搞不明白这里怎么写
  36. }
  37. addLoadEvent(prepareGallery);//初始化页面时加载prepareGallery ()
  38. addLoadEvent(example);//初始化页面时加载example ()
复制代码
代码可以在js中给a标签注册事件,可是整个表单我不知道怎么注册

<form id="form1" name="form" method="post" action="">
</form>
如何在js代码中
实现
<form id="form1" name="form" onsubmit=“return sub()”  method="post" action="">
</form>这个效果




作者: 曾虓    时间: 2012-4-16 23:45
提示: 该帖被管理员或版主屏蔽




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