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

(本文年代久远,请谨慎阅读)

表格属性

<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,颜色是黑色

表格分色

1 <%if(i%2!=0){ %><tr bgcolor="#CFEEF8">... ...</tr>
2 <%}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图书馆以及 百度文库的在线预览

如何实现:

 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; 
    }
}

一个更简单的方法就是在中加入如下的代码,这样鼠标的左右键都失效了.

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()">

禁止网页另存为:在后面加入以下代码:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券