首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >注册型网站设计的阶段总结

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

作者头像
ZONGLYN
发布2019-08-08 10:55:40
2.6K0
发布2019-08-08 10:55:40
举报
文章被收录于专栏:程序萌部落程序萌部落

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

表格属性

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

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2014-11-27,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 表格属性
  • 表格分色
  • 点击传值
  • 直接静态链
  • 动态action传数据
  • 多项注册型网站要考虑的东西
    • 输入检测
    • 不同选项之间有关联时的动态对应性
      • 空值检测
        • 必填判断
          • 具有注册后更改的页面的实现
            • 注册名判重
            • 数据库中表结构格式的设置
            • 其他
            相关产品与服务
            数据库
            云数据库为企业提供了完善的关系型数据库、非关系型数据库、分析型数据库和数据库生态工具。您可以通过产品选择和组合搭建,轻松实现高可靠、高可用性、高性能等数据库需求。云数据库服务也可大幅减少您的运维工作量,更专注于业务发展,让企业一站式享受数据上云及分布式架构的技术红利!
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档