注册型网站设计——阶段总结

列个清单

#表格属性

 <table cellpadding="0" cellspacing="0" width="100%" align="center"  

style="ord-break:break-all;word-wrap:break-word;margin-right:0px;margin-left:0px;border:1px solid #000000; margin-top:10px;"  >

  align="center"表格元素在格子内居中

  cellpadding="0" cellspacing="0"元格子（组成表格的每一个小格子）之间的距离为零，即一般表格样式

  border:1px solid #000000;表格线的宽度为1px，颜色是黑色

#表格分色

<%if(i%2!=0){ %><tr bgcolor="#CFEEF8">... ...</tr>

<%}else{ %><tr bgcolor="#000005">... ...<tr><%} %>

这是我自己想的方法，不知道大众化的方法是怎样实现的，其实分色就是利用bgcolor这个属性给表格上色

#文字/按钮链接属性有form，无form，需要返回值，无需返回值直接简单执行

这是对于“批量按钮”来说的，如果是简单的地址链接，那直接href添加上，无需多说

但是如果是“删除”这种按钮，点击一下，会触发删除的action，后台会在数据库中将相应的id的记录删掉

所以在给“删除”添加链接时，就要传递一个参数id，并且处理一个action，但是单纯的用href=action?id=xx 

的方式对于数字英文是可以，不过如果传参不是id，而是一些中文字符，则此处会出现传值乱码现象，具体参见我的：

这篇：http://blog.csdn.net/u012935646/article/details/42007041

#直接静态链接---<span></span>以及<a></a>标记都可以添href属性

比如<span href="http:www.baidu.com" >百度</span>

<ahref="http:www.baidu.com" >百度</a>都可以为百度二字添加相应的百度链接

#动态action传数据--利用onclick属性转js；

同“文字/按钮链接属性有form，无form>....."具体参见：http://blog.csdn.net/u012935646/article/details/42007041

#多项注册型网站要考虑的东西

#检测邮箱格式的正确性，电话，手机等等，利用正则表达式+实现正则方法

有多重正则表达式，不能说谁优谁劣，具体有以下等等：

其一：

<script language="javascript" type="text/javascript" > /**  * Check email format  */   function emailCheck(obj, labelName) {      var objName = eval("document.all."+obj);      var pattern = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;      if (!pattern.test(objName.value)) {          alert("请输入正确的邮箱地址。");          objName.focus();          return false;          }          return true;           }         </script>            <input type="text" id="email" name="email" maxlength="30" onblur="return emailCheck('email', 'email')"  /> //jsp代码

其二：

        <script type="text/javascript">                function isValidMail() {                          var TextVal = document.getElementById("TextBox1").value;                          var Regex = /^(?:\w+\.?)*\w+@(?:\w+\.)*\w+$/;                          if (Regex.test(TextVal)){                              alert(true);                       }else {                              if (TextVal == "") {                                  alert("请输入电子邮件地址！！");                                  return false;                           }else {                                  alert("您好，你输入不正确，请重新输入；");                                  document.getElementById("TextBox1").value = "";                                  return false;                           }                    }                </script>        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> //asp的代码           <asp:Button ID="Button3" runat="server" Text="Button"  OnClientClick="return isValidMail()" OnClick="Button3_Click" />  //asp的代码

其三：

        function test()        {               var temp = document.getElementById("text1");                      //对电子邮件的验证               var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;               if(!myreg.test(temp.value))               {                      alert('提示\n\n请输入有效的E_mail！');                      myreg.focus();                      return false;               }         }                     //由于方法相同，一下只写出相关的正则表达式                     //对于手机号码的验证（提供了两种方法）                     var mobile=/^((13[0-9]{1})|159|153)+\d{8}$/;                     var mobile1=/^(13+\d{9})|(159+\d{8})|(153+\d{8})$/;                     //对于区号的验证                     var phoneAreaNum = /^\d{3,4}$/;                     //对于电话号码的验证                     var phone =/^\d{7,8}$/;

以上代码的含义说明：

1、/^$/ 这个是个通用的格式。

^ 匹配输入字符串的开始位置；$匹配输入字符串的结束位置

2、其中输入需要实现的功能。

+ 匹配前面的子表达式一次或多次；

？匹配前面的子表达式零次或一次；

\d  匹配一个数字字符，等价于[0-9]；

* 匹配前面的子表达式零次或多次；

#不同选项之间有关联时的动态对应性

比较麻烦，以后会单独研究一下

#全空格或回车的定性为空的特性，注册时，更改时

这是对于文本框信息进行检验的一个步骤，当我们进行输入时，应该把空格全部去掉，无论是提交的用户名也好，还是一串查询的信息也好

空格对于后代的数据库处理其实都是无用的，所以要进行过滤，使用的方法：

var xxx = inputname.trim()；//假设已经获得了input框的值，并且把它赋值给了inputname

这样可以把输入到文本框里的字符中的空格给去掉

再者，如果对于”输入不为空“这个条件进行检测，那么输入一串空格将是必须的，上述的trim()可以吧字符串去掉空格字符，当然对于一串

空格，处理后就会是空值，即上述方法就可以完成。

#哪个必须输入，哪个不用的提交判断

这是对于有多项注册项目的网站来说的，比如12306的注册，有一二十项，但是必须填的可能也就那几项，我们会在表格后面紧跟红星*等等方法标记

#具有注册后更改的页面的实现

有一些是需要动态选择的，比如说：

有一个提交文档的选项，是或否，选择是，则会出现提交文档的按钮，禁止提交为空，即不提交；如果选择否，那么不会出现提交选项；

这个实现用js：

           function yns(){                  var publish=$("#formxx [name='publish']:checked").val();//内容可忽略就是获取选择项的值,如果选择是，则写一个*号，如果选择否，则写空                if(publish=="yes"){                        document.getElementById('cnt').innerHTML='<font color="red"> *</font>';                }else{                        document.getElementById('cnt').innerHTML=' ';                }           }

#用户名的提交判重实现，用户名已存在

这对于一个注册网站来说是很重要的，在后台的数据库中，不会允许有两个相同用户名的账号存在，传统方式是提交完后，然后给注册者一个反馈，这是不合理的

虽然也可以，但是不友好，友好的检测是在用户一旦输入完用户名后就给出相应的弹窗信息，这样用户就会及时的进行修改

如何实现：

利用ajax-Asynchronous Javascript And XML异步JavaScript和XML，ajax是一种编程方式并非一种新语言

可以进行无刷新的检测，即虽然也执行action，也具有后台的处理，但是不会出现跳转，也不会刷新本页面，实现用户名查重的方法如下：

        <script type="text/javascript">         function checkRegister(){               var uname = $("#username").val();                  //alert(uname);                  //检查输入内容格式              if(uname=="")              {                  alert("用户名不能为空");                  $("#username").focus();                  return;              }              var flag = false;              $.ajax({  //编程方式                  type : "post",                  async:false,                  url : "check.action?uname="+uname,                  success : function(result) {if(result=="failure"){alert("用户名已存在");$("#username").focus();}else{flag = true;}  },  failure:function(){}             });            return flag;         }         </script>

#数据库中表结构格式的设置

#action?xx=x直接传值乱码的解决 参见：：http://blog.csdn.net/u012935646/article/details/42007041

#Firefox中js function报错xx is not defined的问题

火狐的Firebug可以说是给我们web开发提供了许多的便利，但是有些时候一些错误却会误导我们，浪费我们的时间：

比如页面中写了一个function do，但是在运行页面时没有执行预期的效果，而且出现了一条错误信息：do is not defined

如何看待这个错误：这并不是我们function的问题，有的时候一个变量的定义错误，或许是忘记结尾加分号，或许是function程序体里面的括号匹配有问题

上述情况都会引起Firebug的报错，毕竟没法对js中的错误定位到行，所以“尽信工具则不如无工具”

#使用js进行按键的屏蔽，鼠标键的屏蔽，即屏蔽复制保存等操作

这又是一个在现在web项目中经常遇到的需要解决的一个问题，为何：因为有些数据是不能被复制的

比如说一个会议信息系统可以查询到与会人员的信息，一个普通的注册账户可以正常的查看其它开会人员的信息，这是合情合理的，

但是如果有人将信息复制，或通过网页保存的方式等等，把这个数据获取到了，那么一些提交的重要文档资料，救会被泄露

最真实的应用：360图书馆以及 百度文库的在线预览

如何实现：

<Script Language=javascript>          function key(){                   //if(event.shiftKey){                  //window.close();}                  //禁止shift              if(event.altKey){                  alert('禁止CTRL-C复制本贴内容');}                  //禁止alt                  if(event.ctrlKey){                        alert('禁止CTRL-C复制本贴内容');}                        //禁止ctrl                        return false;                  }                  document.onkeydown=key;                  if (window.Event)                  document.captureEvents(Event.MOUSEUP);                  function norightclick(e){                        if (window.Event){                        if (e.which == 2 || e.which == 3)                              return false;}                else if (event.button == 2 || event.button == 3){                              event.cancelBubble = true                              event.returnValue = false;                         return false;}                        }                  function Click(){                         alert('禁止右键粘贴本贴内容');                         window.event.returnValue=false;                   }                document.oncontextmenu=Click;        </Script>

一个更简单的方法就是在<body>中加入如下的代码,这样鼠标的左右键都失效了.
 topmargin="0" oncontextmenu="return false" ondragstart="return false" onselectstart ="return false" onselect="document.selection.empty()" 

oncopy="document.selection.empty()" onbeforecopy="return false" onmouseup="document.selection.empty()"
或

<body onmousemove=\HideMenu()\ oncontextmenu="return false" ondragstart="return false" onselectstart ="return false" onselect="document.selection.empty()" 

oncopy="document.selection.empty()" onbeforecopy="return false" onmouseup="document.selection.empty()">

禁止网页另存为：在<body>后面加入以下代码：<noscript><iframe src="*.htm"></iframe></noscript>

#在jsp/html页面中给某变量赋值的书写格式

#图片添加链接  so esay

#jquery实现表格列首的固定，表格内容滚动 复杂js

在写一个动态表格页面的时候，通常需要固定表格的高度，如果超出界限那么就会出现滚动条，但是当我们拉下滚动条时，表头部分并不会停在原处，

结果就是如果下拉的长度过长，则会忘记对应的列是什么，这对一些具有多列的表格来说是很不友好的，如何实现：

还是利用JavaScript进行定位，具体详见：待续

#js--jsp---html---ajax---jqauery

########################################################################################

########################### 【 未 】 【 完 】 【 待 】 【 续 】###################################

########################################################################################