javascript正则表达式验证汇总

一、验证数字

<script type=”text/javascript”>
function validate(){
var reg = new RegExp(“^[0-9]*$”);
var obj = document.getElementById(“name”);
if(!reg.test(obj.value)){
alert(“请输入数字!”);
}
if(!/^[0-9]*$/.test(obj.value)){
alert(“请输入数字!”);
}
}
</script>

验证数字的正则表达式集
验证数字:^[0-9]*$
验证n位的数字:^\d{n}$
验证至少n位数字:^\d{n,}$
验证m-n位的数字:^\d{m,n}$
验证零和非零开头的数字:^(0|[1-9][0-9]*)$
验证有两位小数的正实数:^[0-9]+(.[0-9]{2})?$
验证有1-3位小数的正实数:^[0-9]+(.[0-9]{1,3})?$
验证非零的正整数:^\+?[1-9][0-9]*$
验证非零的负整数:^\-[1-9][0-9]*$
验证非负整数(正整数 + 0) ^\d+$
验证非正整数(负整数 + 0) ^((-\d+)|(0+))$
验证长度为3的字符:^.{3}$
验证由26个英文字母组成的字符串:^[A-Za-z]+$
验证由26个大写英文字母组成的字符串:^[A-Z]+$
验证由26个小写英文字母组成的字符串:^[a-z]+$
验证由数字和26个英文字母组成的字符串:^[A-Za-z0-9]+$
验证由数字、26个英文字母或者下划线组成的字符串:^\w+$
验证用户密码:^[a-zA-Z]\w{5,17}$ 正确格式为:以字母开头,长度在6-18之间,只能包含字符、数字和下划线。
验证是否含有 ^%&’,;=?$\” 等字符:[^%&’,;=?$\x22]+
验证汉字:^[\u4e00-\u9fa5],{0,}$
验证Email地址:^\w+[-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
验证InternetURL:^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$ ;^[a-zA-z]+://(w+(-w+)*)(.(w+(-w+)*))*(?S*)?$
验证电话号码:^(\(\d{3,4}\)|\d{3,4}-)?\d{7,8}$:–正确格式为:XXXX-XXXXXXX,XXXX-XXXXXXXX,XXX-XXXXXXX,XXX-XXXXXXXX,XXXXXXX,XXXXXXXX。
验证身份证号(15位或18位数字):^\d{15}|\d{}18$
验证一年的12个月:^(0?[1-9]|1[0-2])$ 正确格式为:“01”-“09”和“1”“12”
验证一个月的31天:^((0?[1-9])|((1|2)[0-9])|30|31)$ 正确格式为:01、09和1、31。
整数:^-?\d+$
非负浮点数(正浮点数 + 0):^\d+(\.\d+)?$
正浮点数 ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$
非正浮点数(负浮点数 + 0) ^((-\d+(\.\d+)?)|(0+(\.0+)?))$
负浮点数 ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$
浮点数 ^(-?\d+)(\.\d+)?$

 

纯js脚本1k大小的3D玫瑰 程序员专用(收藏)

这是用代码做出的玫瑰花

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!doctype html>
<html>
<head>
<title>Love</title>
<meta charset="utf-8" />
<!--[if IE]>                                                                 
<![endif]-->
</head>
<body>
<canvas id="c"></canvas>
<script>
    var b = document.body;
    var c = document.getElementsByTagName('canvas')[0];
    var a = c.getContext('2d');
    document.body.clientWidth; 
</script>
<script>
    // start of submission //
    with (m = Math) C = cos, S = sin, P = pow, R = random; c.width = c.height = f = 500; h = -250; function p(a, b, c) { if (c > 60) return [S(a * 7) * (13 + 5 / (.2 + P(b * 4, 4))) - S(b) * 50, b * f + 50, 625 + C(a * 7) * (13 + 5 / (.2 + P(b * 4, 4))) + b * 400, a * 1 - b / 2, a]; A = a * 2 - 1; B = b * 2 - 1; if (A * A + B * B < 1) { if (c > 37) { n = (j = c & 1) ? 6 : 4; o = .5 / (a + .01) + C(b * 125) * 3 - a * 300; w = b * h; return [o * C(n) + w * S(n) + j * 610 - 390, o * S(n) - w * C(n) + 550 - j * 350, 1180 + C(B + A) * 99 - j * 300, .4 - a * .1 + P(1 - B * B, -h * 6) * .15 - a * b * .4 + C(a + b) / 5 + P(C((o * (a + 1) + (B > 0 ? w : -w)) / 25), 30) * .1 * (1 - B * B), o / 1e3 + .7 - o * w * 3e-6] } if (c > 32) { c = c * 1.16 - .15; o = a * 45 - 20; w = b * b * h; z = o * S(c) + w * C(c) + 620; return [o * C(c) - w * S(c), 28 + C(B * .5) * 99 - b * b * b * 60 - z / 2 - h, z, (b * b * .3 + P((1 - (A * A)), 7) * .15 + .3) * b, b * .7] } o = A * (2 - b) * (80 - c * 2); w = 99 - C(A) * 120 - C(b) * (-h - c * 4.9) + C(P(1 - b, 7)) * 50 + c * 2; z = o * S(c) + w * C(c) + 700; return [o * C(c) - w * S(c), B * 99 - C(P(b, 7)) * 50 - c / 3 - z / 1.35 + 450, z, (1 - b / 1.2) * .9 + a * .1, P((1 - b), 20) / 4 + .05] } } setInterval('for(i=0;i<1e4;i++)if(s=p(R(),R(),i%46/.74)){z=s[2];x=~~(s[0]*f/z-h);y=~~(s[1]*f/z-h);if(!m[q=y*f+x]|m[q]>z)m[q]=z,a.fillStyle="rgb("+~(s[3]*h)+","+~(s[4]*h)+","+~(s[3]*s[3]*-80)+")",a.fillRect(x,y,1,1)}', 0)
    // end of submission //
</script>
</body>
</html>

 

jQuery扩展类库thickbox实现弹出层

1> 引用JQuery插件、thickbox插件;

<script type="text/javascript" src="path-to-file/jquery.js"></script> 
<script type="text/javascript" src="path-to-file/thickbox.js"></script>

2> 引入thickbox的css文件;

<link rel="stylesheet" href="path-to-file/thickbox.css" type="text/css" media="screen" />

3> 对需要使用 thickbox效果的对象加入以下代码, 给创建的这个link元素一个class="thickbox"属性;

 <a href="Upimg/single.jpg" title="add a caption to title attribute " class="thickbox">
      对象/图片
 </a>

一、一张图片

<1>给创建的这个link元素一个  class="thickbox"  属性
调用代码如下:

<a href=”Upimg/single.jpg” title=”add a caption to title attribute ” class=”thickbox”>

 

 

 

<img src=”Upimg/single_t.jpg” alt=”Image 2″/>
</a>

二、多张图片

 <1>给创建的这个link元素一个  class="thickbox"  属性
<2>给每一个link元素一个相同的rel值。(比如:rel="gallery-plants")


<a href="Upimg/plant1.jpg" title="add a caption " class="thickbox" rel="gallery-plants">
 <img src="Upimg/plant1_t.jpg" alt="Plant 1" />
</a> 

<a href="Upimg/plant2.jpg" title="add a caption" class="thickbox" rel="gallery-plants">
      <img src="Upimg/plant2_t.jpg" alt="Plant 2" />
</a> 

<a href="Upimg/plant3.jpg" title="add a" class="thickbox" rel="gallery-plants">
      <img src="Upimg/plant3_t.jpg" alt="Plant 3" />
</a> 

三、 层

 <1>给创建的这个link元素一个  class="thickbox"  属性
<2>给link元素的href属性设置为: #TB_inline
<3>在href属性的值#TB_inlineIn后面追加一下字符: ?height=300&width=300&inlineId=myOnPageContent
    当然你也可以在参数字符串中加 modal=true(比如. #TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true) 这样当关闭ThickBox时会调用ThickBox内部的一个tb_remove()函数。在演示中查看“显示隐藏模式的内容”则要求点击yes 或 no才能关闭ThickBox。

  代码如下:

<input alt="#TB_inline?height=300&width=400&inlineId=myOnPageContent" title="add a caption" class="thickbox" type="button" value="Show" /> 

<div id="myOnPageContent">
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
 <p><select name=""><option>测试</option></select></p>
</div>

四、iframe

<1>给创建的这个link元素一个  class="thickbox"  属性 
<2> 
href属性的URL后面追加上以下字符参数: ?KeepThis=true&TB_iframe=true&height=400&width=600
代码如下:

<a href="Upimg/ajax_ifram.html?keepThis=true&TB_iframe=true&height=250&width=400" title="add a caption to title attribute / or leave blank" class="thickbox">
    例子1
</a> 

参考:http://blog.sina.com.cn/s/blog_64d8a1d00100i7r5.html

获取对象在浏览器中的坐标(转)

一、定义

getBoundingClientRect 函数是W3C组织在第一版本的W3C CSSOM View specification草案中确定的一个标准方法,在此之前,只有IE浏览器是支持该方法的,W3C在这次草案中把它扶正成为标准,足可以看出它并不简单。getBoundingClientRect 方法返回的是调用该方法的元素的TextRectangle对象,该对象具有top、left、right、bottom四个属性,分别代表该元素上、左、右、下四条边界相对于浏览器窗口左上角(注意,不是文档区域的左上角)的偏移像素值。

二、兼容性

getBoundingClientRect方法最先在IE5中出现,后来被W3C接纳成为标准。目前IE5.5+、Firefox 3.5+、Chrome 4+、Safari 4.0+、Opara 10.10+等浏览器均支持该方法,兼容性几乎完美。

在具体表现方面,Firefox6以前的版本使用getBoundingClientRect时不能获取到top和bottom这两个属性值,Firefox6及以后的版本和其他支持getBoundingClientRect方法的浏览器则top、left、right、bottom四个属性值均能获取到。需要说明的是由于某些版本的IE浏览器的<html>文档根元素默认是有2px边框的,所以这里需要特别处理一下,微软MSDN上说在IE5中会存在这样的情况,但据我实际测试,xp系统中IE6也存在这样的问题,奇怪的是,我在win7环境下用IETester测试的IE各版本都是正常的。但这并不是什么大问题,我们只要把得到的值减去html根元素(body也可考虑进来)的clientLeft或clientTop就能保持各浏览器一致啦。

三、用途

当getBoundingClientRect刚被w3c列为标准的时候,PPK还曾质疑过它是不是多此一举,因为已经存在类似的方法来获取元素的偏移位置,比如offsetLeft和offsetTop。但Jquery的作者John Resig马上阐明了getBoundingClientRect的用处。用传统的方法固然可以实现getBoundingClientRect同样的功能,但兼容各种浏览器以及各种不同的元素就会把你弄死,而且效率还非常低下。所以获取页面上某个元素相对于浏览器窗口的偏移量就成了getBoundingClientRect的用武之地了。而获取元素的偏移量能有什么用,我相信,你懂的~ ^_^

 

IE6和IE8区别(待整理)

IE6是单线程(解析标签会等待有阻塞,例如object没指定src属性),IE8是双线程。

IE8与IE6和IE7的区别(转载整理):

1 IE8中的css中关于width或是height中如果使用像素形式作为参数时,参数必须是带“px”的,而且此参数必须是大于0的,而在IE6和IE7中是支持不带“px”参数的,而且参数是可以为一个负数。
2 IE8中的css中“border-style:outset ;”是没有效果的。
3 IE8中的无序列表<ui>之间的距离要比IE6和IE7大的多,而且我还没有找到调整的方法。
4 在IE8中,一个Iframe中取event.x的值不是Iframe中的相对x坐标,而是最外层的window的x坐标,但是event.y却是取的是 Iframe中的相对y坐标。而在IE6和IE7中,event.x和event.y却得的都是所在Iframe中的相对坐标,真是搞不懂!可以用 event.clinetX代替。
5 IE8中的javascript中function对象例如:
      function a(){
            alert(”haha”);
       }
      var fun=new Function(“”,a);
      alert(fun);
此时返回的值为function anonymous(){function a(){alert(“haha”)}} 而在IE6和IE7中返回的值为function anonymous(){alert(“haha”)};也就是说当Function的第二个参数如果是一个函数时,IE8对此参数作用的是整个函数的代码,而IE6和IE7则是对此参数起作用的是函数的内部代码(不包括 “function a(){”和“}”的函数头和尾)
6 IE8中expression函数不起作用。所以如何在css中写javascript代码还不清楚。
7.如下代码
.regDiv{
    background-image:url(image/bg.gif); MARGIN: 0px auto; WIDTH: 800px;
}
.regWrap{
    vertical-align:center ;border:0px ;margin:0 auto; width:95%
}
.regWrap TD{
    FONT: 12px/25px ‘arial’;
    VERTICAL-ALIGN: buttom;
    PADDING-TOP: 2px;
    PADDING-BOTTOM: 2px;
    PADDING-LEFT:5px;
    white-space:nowrap;
    vertical-align:bottom;
}
.regWrap EM {
    PADDING-RIGHT: 5px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; COLOR: #cc0000; PADDING-TOP: 0px
}
.regWrap SPAN{
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px;OVERFLOW: hidden; HEIGHT: 20px;color: #999999
}
.regWrap INPUT{
    HEIGHT: 18px
}
A{
    FONT: 12px/12px ‘arial’;
    COLOR: #039;
    TEXT-DECORATION: none;
}
这段代码中如果在IE8以下版本中,A的样式是无效的,而在IE8中是有效的。但是如果把A{……}的样式放在.regWrap{……}前面,这样IE8及以下版本中A的样式就都有效了。
@看了下。。 。在IE6里面做的网站其中的高度为一像素表格在IE8里面显示的不是一像素了。 总之变的很明显的大了
@bug or something else
<div style=”width:300px;float:left;clear:both;(这里的clear无关紧要似的)”>
<a href=”#”><img alt=”” src=”tl.png”/></a><a href=”#”><img alt=”” src=”pl.png”/></a>
</div>
以上这段代码,在IE8里面,如果我们给img一个float:left;属性那么a标签就会自动产生3px的margin-left(也可以理解为 img标签会吧),即便在样式里面用a{padding:0;margin:0;}都不行,给img这样做也不行,即便是inline style;再者,如果我们给a一个width属性,那么除了3px的margin-left,我们还能看到4像素的margin-top或者说是 padding-top在掉下来的第二个a标签的头部,但是在IE8以前版本以及其他浏览器上是正常显示的(虽然给imgfloat属性是没有必要的)。。。
解决方案?暂时没有吧——但是可以避免,就是不要滥用float;
困惑
<div class=”layout-right”>
<div class=”list-1 height-72″ style=”width: 100%;float:left;”><a href=”mailto:hanwei@mail.hust.edu.cn”><img alt=”团长信箱” src=”images/tl.png” /></a><a href=”mailto:zb2004@mail.hust.edu.cn”><img alt=”书记信箱” src=”images/pl.png” /></a></div>
<div class=”list-2″ style=”width: 273px;float:left;”>
。。。
这个地方有点纠结——因为两张图片的宽度加起来正好一共300px,而整个容器也是layout-right,list-1,list-2都是 300px,内第一个div,给浮动,里面的图片似乎也得给浮动(这和第一个例子不一样,似乎是因为外面的大容器对内部的内部的元素也产生了影响),不然会自动选择换行显示,且头部还会多出一点间距来(已经给img,a padding,margin在外导入样式表清0了)即便理论上是刚刚能挤下来(这是在除IE8的nav里都能做到的),好,那我们给img浮动吧,可是很不幸,第二个a标签会向下掉若干个像素(具体什么规律和原理我还不知道),虽然a img 的margin padding清0工作是已经做了的——
但是如果给a,img一个inline style margin padding 0 ,又偏偏能起到作用,这让我怀疑自己代码的规范性了——但我确实给了a,img一个margin padding清零的class,而且并未被覆盖。

 

javascript中window与document(转载整理)

window对象和document对象的区别

一般来讲,一个window里就是一个document,但是,iframe里面也可以装个document,在iframe里面就有区别了

alert(document.location === window.location); // true

不要混淆Window对象的location属性和Document对象的location属性。

前者引用一个Location对象,而后者只是一个只
读字符串,并不具有Location对象的任何特性。

document.location与document.URL是同义的,后者在
JavaScript1.1中是该属性的首选名称(因为这样避免了潜在的混淆)。

在大多数情况下,document.location和
location.href是相同的。但是,当存在服务器重定向时,

document.location包含的是已经装载的URL,而
location.href包含的则是原始请求的文档的URL。
document.location和window.location有什么区别就是
document你可以理解为文档,就是你的网页
window理解为窗口,就是你的ie浏览器包含的
无框架:简单的说,没有框架的情况下,是等同的
有框架:在有框架的情况下,最外层是相同的,

在iframe里面的document.location和window.location不同的。
iframe里面的document.location 你看不ie地址变化,只改变iframe部分,
此时的window.location和top.location效果一致
document.location=”url”;(只读)

document.location.reload(“url”;);
window.location=”url”;
location=”url”;
document.href=”url”;
document.location.href=”url”;
document.location.replace=”url”;
document.action=”url”;

document.submit();
document.location.href;和document.location.replace;

都可以实现从A页面切换到B页面,但他们的区别是:
用document.location.href切换后,可以退回到原页面。

而用document.location.replace切换后,不可以通过“后退”退回到原页面。
关于document.location.href或其他可回退的切换方式
document.location 相当于 document.URL 声明了装载文档的URL,
除非发生了服务器重定向, 否则该属性的值与Window.location.href的值是一样的.
history.go(-1);//返回上一页
document.IFRAME名称.location.href=’url’;//改变框架内容

 

Javascript浮点数比较大小

今天在修改bug的时候发现个关于2个浮点数之和和第3 数比较大小的问题,2个数之和通过人工计算的确和第3个数相等,但是js在判断的时候就变成不相等了,最后发现是2个浮点数相加后出现了精度缺失,正确的比较方式应该如下所示:

return Math.abs((1*num3) – ((1*num1) + (1*num2))) < 0.01?true:false;

利用差值的绝对值的精度来判断:

具体就是:f1和f2是两个浮点数,precision是我们自己设置的精度,比如1e-6。

则可以用 fabs(f1-f2)<=precision 来判断f1和f2是否相等。

如果要求更高的精度,则把precision定得更小就行了。