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

表格属性

1
<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
2
<%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

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

输入检测

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

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

其一:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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代码

其二:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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的代码

其三:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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:

1
2
3
4
5
6
7
8
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,也具有后台的处理,但是不会出现跳转,也不会刷新本页面,实现用户名查重的方法如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<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图书馆以及 百度文库的在线预览

如何实现:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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;
}
}

一个更简单的方法就是在

中加入如下的代码,这样鼠标的左右键都失效了.

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

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

禁止网页另存为:在

后面加入以下代码: