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定得更小就行了。