在B/S开发中经常用到的javaScript技术

一、验证类 1、数字验证内 1.1 整数 /^(-|+)?d+$/　　不可以为空 /^[-+]?d*$/ 可以为空 1.2 大于0的整数 （用于传来的ID的验证) /^d+$/ 1.3 负整数的验证 /^-d+$/ 1.4 整数不能大于iMax 根据上面的正则可以写出。 1.5 整数不能小于iMin 根据上面的正则可以写出。 2、时间类 2.1 短时间，形如 (13:04:06)

代码内容 function isTime(str) { var a = str.match(/^(d{1,2})(:)?(d{1,2})(d{1,2})$/); if (a == null) {alert(’输入的参数不是时间格式’); return false;} if (a[1]>24 || a[3]>60 || a[4]>60) { alert("时间格式不对"); return false } return true; }

2.2 短日期，形如 (2003-12-05)

代码内容 function strDateTime(str) { var r = str.match(/^(d{1,4})(-|/)(d{1,2})(d{1,2})$/); if(r==null)return false; var d= new Date(r[1], r[3]-1, r[4]); return (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]); }

2.3 长时间，形如 (2003-12-05 13:04:06)

代码内容 function strDateTime(str) { var reg = /^(d{1,4})(-|/)(d{1,2})(d{1,2}) (d{1,2}):(d{1,2}):(d{1,2})$/; var r = str.match(reg); if(r==null)return false; var d= new Date(r[1], r[3]-1,r[4],r[5],r[6],r[7]); return (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]&&d.getHours()==r[5]&&d.getMinutes()==r[6]&&d.getSeconds()==r[7]); }

2.4 只有年和月。形如(2003-05,或者2003-5) 2.5 只有小时和分钟,形如(12:03) 3、表单类 3.1 所有的表单的值都不能为空

代码内容 <input οnblur="if(this.value.replace(/^s+|s+$/g,’’)==’’)alert(’不能为空!’)">

3.2 多行文本框的值不能为空。 3.3 多行文本框的值不能超过sMaxStrleng

代码内容 //检验文本框中内容是否超长 function CheckTextareaLength(val, max_length) { var str_area=document.forms[0].elements[val].value; if (str_area!=null&&str_area.length > max_length) { alert("字段文字超长，最多可输入" + max_length +"个字符，请重新输入！"); document.forms[0].elements[val].focus(); document.forms[0].elements[val].select(); return false; } return true; }

3.4 多行文本框的值不能少于sMixStrleng 3.5 判断单选框是否选择。

代码内容 function CheckRadio(val,msg1,msg2) { var is_radio=document.forms[0].elements[val]; var s_msg1=(msg1==null || msg1=="")? "请选择 radio!":msg1; var s_msg2=(msg2==null || msg2=="")? "没有可选的 radio!":msg2; if(is_radio) { if (document.forms[0].elements[val].value != null) { if (document.forms[0].elements[val].checked) { return true; } else { alert(s_msg1); return false; } } else { var check_length = document.forms[0].elements[val].length; var i_count=0 for(var i=0;i<check_length;i++) { if (document.forms[0].elements[val](i).checked) { i_count=i_count+1; return true; } } if(i_count==0) { alert(s_msg1); return false; } } }// else { alert(s_msg2); return false; } }

3.6 判断复选框是否选择.

代码内容 function CheckCheckbox(val,msg1,msg2) { var is_radio=document.forms[0].elements[val]; var s_msg1=(msg1==null || msg1=="")? "请选择CheckBox!":msg1; var s_msg2=(msg2==null || msg2=="")? "没有可选的CheckBox!":msg2; if(is_radio) { if (document.forms[0].elements[val].value != null) { if (document.forms[0].elements[val].checked) { return true; } else { alert(s_msg1); return false; } } else { var check_length = document.forms[0].elements[val].length; var i_count=0 for(var i=0;i<check_length;i++) { if (document.forms[0].elements[val](i).checked) { i_count=i_count+1; return true; } } if(i_count==0) { alert(s_msg1); return false; } } }// else { alert(s_msg2); return false; } }

3.7 复选框的全选，多选，全不选，反选

代码内容 <form name=hrong> <input type=checkbox name=All οnclick="checkAll(’mm’)">全选<br/> <input type=checkbox name=mm οnclick="checkItem(’All’)"><br/> <input type=checkbox name=mm οnclick="checkItem(’All’)"><br/> <input type=checkbox name=mm οnclick="checkItem(’All’)"><br/> <input type=checkbox name=mm οnclick="checkItem(’All’)"><br/> <input type=checkbox name=mm οnclick="checkItem(’All’)"><br/><br/> <input type=checkbox name=All2 οnclick="checkAll(’mm2’)">全选<br/> <input type=checkbox name=mm2 οnclick="checkItem(’All2’)"><br/> <input type=checkbox name=mm2 οnclick="checkItem(’All2’)"><br/> <input type=checkbox name=mm2 οnclick="checkItem(’All2’)"><br/> <input type=checkbox name=mm2 οnclick="checkItem(’All2’)"><br/> <input type=checkbox name=mm2 οnclick="checkItem(’All2’)"><br/> </form> <SCRIPT LANGUAGE="javascript"> function checkAll(str) { var a = document.getElementsByName(str); var n = a.length; for (var i=0; i<n; i++) a[i].checked = window.event.srcElement.checked; } function checkItem(str) { var e = window.event.srcElement; var all = eval("document.hrong."+ str); if (e.checked) { var a = document.getElementsByName(e.name); all.checked = true; for (var i=0; i<a.length; i++) { if (!a[i].checked){ all.checked = false; break;} } } else all.checked = false; } </SCRIPT>

3.8 文件上传过程中判断文件类型

代码内容 <input type=file οnchange="alert(this.value.match(/^(.*)(.)(.{1,8})$/)[3])">

4、字符类 4.1 判断字符全部由a-Z或者是A-Z的字字母组成

代码内容 <input οnblur="if(/[^a-zA-Z]/g.test(this.value))alert(’有错’)">

4.2 判断字符由字母和数字组成。

代码内容 <input οnblur="if(/[^0-9a-zA-Z]/g.test(this.value))alert(’有错’)">

4.3 判断字符由字母和数字，下划线,点号组成.且开头的只能是下划线和字母

代码内容 /^([a-zA-z_]{1})([w]*)$/g.test(str)

4.4 字符串替换函数.Replace(); 5、浏览器类 5.1 判断浏览器的类型

代码内容 window.navigator.appName

5.2 判断ie的版本

代码内容 window.navigator.appVersion

5.3 判断客户端的分辨率

代码内容 window.screen.height; window.screen.width;

6、结合类 6.1 email的判断。

代码内容 function ismail(mail) { return(new RegExp(/^w+((-w+)|(.w+))*@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+)*.[A-Za-z0-9]+$/).test(mail)); }

6.2 手机号码的验证 6.3 身份证的验证

代码内容 function isIdCardNo(num) { if (isNaN(num)) {alert("输入的不是数字！"); return false;} var len = num.length, re; if (len == 15) re = new RegExp(/^(d{6})()?(d{2})(d{2})(d{2})(d{3})$/); else if (len == 18) re = new RegExp(/^(d{6})()?(d{4})(d{2})(d{2})(d{3})(d)$/); else {alert("输入的数字位数不对！"); return false;} var a = num.match(re); if (a != null) { if (len==15) { var D = new Date("19"+a[3]+"/"+a[4]+"/"+a[5]); var B = D.getYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5]; } else { var D = new Date(a[3]+"/"+a[4]+"/"+a[5]); var B = D.getFullYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5]; } if (!B) {alert("输入的身份证号 "+ a[0] +" 里出生日期不对！"); return false;} } return true; }

另外一个

代码内容 <script> var aCity={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"} function cidInfo(sId){ var iSum=0 var info="" if(!/^d{17}(d|x)$/i.test(sId))return false; sId=sId.replace(/x$/i,"a"); if(aCity[parseInt(sId.substr(0,2))]==null)return "Error:非法地区"; sBirthday=sId.substr(6,4)+"-"+Number(sId.substr(10,2))+"-"+Number(sId.substr(12,2)); var d=new Date(sBirthday.replace(/-/g,"/")) if(sBirthday!=(d.getFullYear()+"-"+ (d.getMonth()+1) + "-" + d.getDate()))return "Error:非法生日"; for(var i = 17;i>=0;i --) iSum += (Math.pow(2,i) % 11) * parseInt(sId.charAt(17 - i),11) if(iSum%11!=1)return "Error:非法证号"; return aCity[parseInt(sId.substr(0,2))]+","+sBirthday+","+(sId.substr(16,1)%2?"男":"女") } document.write(cidInfo("380524198002300016"),"<br/>"); document.write(cidInfo("340524198002300019"),"<br/>") document.write(cidInfo("340524197711111111"),"<br/>") document.write(cidInfo("34052419800101001x"),"<br/>"); </script>

６．４　ｉｐ地址校验

代码内容 <SCRIPT LANGUAGE="javascript"> function isip(s){ var check=function(v){try{return (v<=255 && v>=0)}catch(x){return false}}; var re=s.split(".") return (re.length==4)?(check(re[0]) && check(re[1]) && check(re[2]) && check(re[3])):false } var s="202.197.78.129"; alert(isip(s)) </SCRIPT>

６．５　．加sp1后还能用的无边框窗口！！

代码内容 <HTML XMLNS:IE> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <IE:Download ID="include" STYLE="behavior:url(#default#download)" /> <title>Chromeless Window</title> <SCRIPT LANGUAGE="JScript"> /*--- Special Thanks For andot ---*/ /* This following code are designed and writen by Windy_sk <seasonx@163.net> You can use it freely, but u must held all the copyright items! */ /*--- Thanks For andot Again ---*/ var CW_width = 400; var CW_height = 300; var CW_top = 100; var CW_left = 100; var CW_url = "/"; var New_CW = window.createPopup(); var CW_Body = New_CW.document.body; var content = ""; var CSStext = "margin:1px;color:black; border:2px outset;border-style:expression(οnmοuseοut=οnmοuseup=function(){this.style.borderStyle=’outset’}, οnmοusedοwn=function(){if(event.button!=2)this.style.borderStyle=’inset’});background-color:buttonface;width:16px;height:14px;font-size:12px;line-height:11px;cursor:Default;"; //Build Window include.startDownload(CW_url, function(source){content=source}); function insert_content(){ var temp = ""; CW_Body.style.overflow = "hidden"; CW_Body.style.backgroundColor = "white"; CW_Body.style.border = "solid black 1px"; content = content.replace(/<a ([^>]*)>/g,"<a οnclick=’parent.open(this.href);return false’ $1>"); temp += "<table width=100% height=100% cellpadding=0 cellspacing=0 border=0>"; temp += "<tr style=’;font-size:12px;background:#0099CC;height:20;cursor:default’ οndblclick="Max.innerText=Max.innerText==’1’?’2’:’1’;parent.if_max=!parent.if_max;parent.show_CW();" οnmοuseup=’parent.drag_up(event)’ οnmοusemοve=’parent.drag_move(event)’ οnmοusedοwn=’parent.drag_down(event)’ onselectstart=’return false’ οncοntextmenu=’return false’>"; temp += "<td style=’color:#ffffff;padding-left:5px’>Chromeless Window For IE6 SP1</td>"; temp += "<td style=’color:#ffffff;padding-right:5px;’ align=right>"; temp += "<span id=Help οnclick="alert(’Chromeless Window For IE6 SP1 - Ver 1.0/n/nCode By Windy_sk/n/nSpecial Thanks For andot’)" style=""+CSStext+"font-family:System;padding-right:2px;">?</span>"; temp += "<span id=Min οnclick=’parent.New_CW.hide();parent.blur()’ style=""+CSStext+"font-family:Webdings;" title=’Minimum’>0</span>"; temp += "<span id=Max οnclick="this.innerText=this.innerText==’1’?’2’:’1’;parent.if_max=!parent.if_max;parent.show_CW();" style=""+CSStext+"font-family:Webdings;" title=’Maximum’>1</span>"; temp += "<span id=Close οnclick=’parent.opener=null;parent.close()’ style=""+CSStext+"font-family:System;padding-right:2px;" title=’Close’>x</span>"; temp += "</td></tr><tr><td colspan=2>"; temp += "<div id=include style=’overflow:scroll;overflow-x:hidden;overflow-y:auto; HEIGHT: 100%; width:"+CW_width+"’>"; temp += content; temp += "</div>"; temp += "</td></tr></table>"; CW_Body.innerHTML = temp; } setTimeout("insert_content()",1000); var if_max = true; function show_CW(){ window.moveTo(10000, 10000); if(if_max){ New_CW.show(CW_top, CW_left, CW_width, CW_height); if(typeof(New_CW.document.all.include)!="undefined"){ New_CW.document.all.include.style.width = CW_width; New_CW.document.all.Max.innerText = "1"; } }else{ New_CW.show(0, 0, screen.width, screen.height); New_CW.document.all.include.style.width = screen.width; } } window.onfocus = show_CW; window.onresize = show_CW; // Move Window var drag_x,drag_y,draging=false function drag_move(e){ if (draging){ New_CW.show(e.screenX-drag_x, e.screenY-drag_y, CW_width, CW_height); return false; } } function drag_down(e){ if(e.button==2)return; if(New_CW.document.body.offsetWidth==screen.width && New_CW.document.body.offsetHeight==screen.height)return; drag_x=e.clientX; drag_y=e.clientY; draging=true; e.srcElement.setCapture(); } function drag_up(e){ draging=false; e.srcElement.releaseCapture(); if(New_CW.document.body.offsetWidth==screen.width && New_CW.document.body.offsetHeight==screen.height) return; CW_top = e.screenX-drag_x; CW_left = e.screenY-drag_y; } </SCRIPT> </HTML>

６．６　电话号码的验证 要求： 　　(1)电话号码由数字、"("、")"和"-"构成 　　(2)电话号码为3到8位 　　(3)如果电话号码中包含有区号，那么区号为三位或四位 　　(4)区号用"("、")"或"-"和其他部分隔开 　　(5)移动电话号码为11或12位，如果为12位,那么第一位为0 　　(6)11位移动电话号码的第一位和第二位为"13" 　　(7)12位移动电话号码的第二位和第三位为"13" 　　根据这几条规则，可以与出以下正则表达式： 　　(^[0-9]{3,4}-[0-9]{3,8}$)|(^[0-9]{3,8}$)|(^([0-9]{3,4})[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)

代码内容 <script language="javascript"> function PhoneCheck(s) { var str=s; var reg=/(^[0-9]{3,4}-[0-9]{3,8}$)|(^[0-9]{3,8}$)|(^([0-9]{3,4})[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)/ alert(reg.test(str)); } </script> <input type=text name="iphone"> <input type=button οnclick="PhoneCheck(document.all.iphone.value)" value="Check">

二、功能类 1、时间与相关控件类 1.1 日历 精华区的日历 1.2 时间控件 1.3 万年历 http://202.112.86.128/studentspace/aqyw/js/calendars/rili/ 1.4 显示动态显示时钟效果（文本，如OA中时间） 特效很容易找到的 1.5 显示动态显示时钟效果 (图像，像手表) 特效很容易找到的 2、表单类 2.1 自动生成表单 2.2 动态添加，修改，删除下拉框中的元素 大版主的ｊｓ宝库里面的对select 的操作已经可以是精品了。 2.3 可以输入内容的下拉框 2.4 多行文本框中只能输入iMax文字。如果多输入了，自动减少到iMax个文字（多用于短信发送) 3、打印类 3.1 打印控件

代码内容 <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <SCRIPT LANGUAGE=javascript> <!-- function setPrint() { WB.ExecWB(8,1); } function previewPrint() { WB.ExecWB(7,1) } //--> </SCRIPT> <script language=vbscript> function setup_page Dim wsh Set wsh = CreateObject("WScript.Shell") on error resume next wsh.RegWrite "HKCUSoftwareMicrosoftInternet explorerPageSetupheader", "", "REG_SZ" wsh.RegWrite "HKCUSoftwareMicrosoftInternet ExplorerPageSetup ooter", "", "REG_SZ" end function </script> </HEAD> <BODY> <OBJECT classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 id=WB width=0> </OBJECT> <INPUT type="button" value="Set" id=button1 name=button1 οnclick="setPrint();"> <INPUT type="button" value="Preview" id=button2 name=button2 οnclick="previewPrint();"> <INPUT type="button" value="setup" id=button2 name=button2 οnclick="setup_page();"> </BODY> </HTML>

4、事件类 4.1 屏蔽右键 4.2 屏蔽所有功能键 4.3 --> 和<-- F5 F11,F9,F1 4.4 屏蔽组合键ctrl+N

代码内容 <script> //禁止ctrl+n和 禁止ctrl+r和 禁止shift+f10 禁止鼠标右键or左右键 和禁止f5 var oLastBtn=0,bIsMenu=false if (window.Event) { document.captureEvents(Event.MOUSEUP); } function nocontextmenu() { event.cancelBubble=true; event.returnvalue=false; return false; } function norightclick(e) { if(window.Event) { if (e.which !=1) { return false; } } else if(event.button!=1) { event.cancelBubble=true; event.returnvalue=false; return false; } } document.οncοntextmenu=nocontextmenu; document.οnmοusedοwn=norightclick; function onKeyDown() { if ((event.altKey)||((event.keyCode==8)&&(event.srcElement.type!="text"&&event.srcElement.type!="textarea"&&event.srcElement.type!="password"))||((event.ctrlKey)&&((event.keyCode==78)||(event.keyCode==82)))||(event.keyCode==116)) { alert(event.keyCode); event.keyCode=0; event.returnvalue=false; } } </script> <body οnkeydοwn="onKeyDown()"> <body> </html>

5、网页设计类 5.1 连续滚动的文字，图片（注意是连续的，两段文字和图片中没有空白出现） 5.2 html编辑控件类 5.3 颜色选取框控件 5.4 下拉菜单 5.5 两层或多层次的下拉菜单 5.6 仿IE菜单的按钮。（效果如rongshuxa.com的导航栏目) 5.7 状态栏，title栏的动态效果（例子很多，可以研究一下） 5.8 双击后，网页自动滚屏 以上都是特效类，很容易找到的。 6、树型结构。 6.1 asp+SQL版 6.2 asp+xml+sql版 6.3 java+sql或者java+sql+xml 7、无边框效果的制作 8、连动下拉框技术 9、文本排序 10，画图类，含饼、柱、矢量贝滋曲线

代码内容 <OBJECT id=S style="LEFT: 0px; WIDTH: 392px; TOP: 0px; HEIGHT: 240px" height=240 width=392 classid="clsid:369303C2-D7AC-11D0-89D5-00A0C90833E6"> </OBJECT> <SCRIPT> S.DrawingSurface.ArcDegrees(0,0,0,30,50,60); S.DrawingSurface.ArcRadians(30,0,0,30,50,60); S.DrawingSurface.Line(10,10,100,100); </SCRIPT>

11，操纵客户端注册表类

代码内容 <SCRIPT> var WshShell = WScript.CreateObject("WScript.Shell"); WshShell.RegWrite ("HKCU/Software/ACME/FortuneTeller/", 1, "REG_BINARY"); WshShell.RegWrite ("HKCU/Software/ACME/FortuneTeller/MindReader", "Goocher!", "REG_SZ"); var bKey = WshShell.RegRead ("HKCU/Software/ACME/FortuneTeller/"); WScript.Echo (WshShell.RegRead ("HKCU/Software/ACME/FortuneTeller/MindReader")); WshShell.RegDelete ("HKCU/Software/ACME/FortuneTeller/MindReader"); WshShell.RegDelete ("HKCU/Software/ACME/FortuneTeller/"); WshShell.RegDelete ("HKCU/Software/ACME/"); </SCRIPT>

12，DIV层相关（拖拽、显示、隐藏、移动、增加） 13，TABLAE相关(客户端动态增加行列，模拟进度条，滚动列表等)

代码内容 <HTML> <SCRIPT LANGUAGE="JScript"> function numberCells() { var count=0; for (i=0; i < document.all.mytable.rows.length; i++) { for (j=0; j < document.all.mytable.rows(i).cells.length; j++) { document.all.mytable.rows(i).cells(j).innerText = count; count++; } } } </SCRIPT> <BODY οnlοad="numberCells()"> <TABLE id=mytable border=1> <TR><TH> </TH><TH> </TH><TH> </TH><TH> </TH></TR> <TR><TD> </TD><TD> </TD><TD> </TD><TD> </TD></TR> <TR><TD> </TD><TD> </TD><TD> </TD><TD> </TD></TR> </TABLE> </BODY> </HTML>

14，各种<object classid=>相关类，如播放器，flash与脚本互动等 16, 刷新/模拟无刷新 异步调用类（XMLHttp或iframe,frame）

代码内容 <script language="JavaScript" type="text/JavaScript"> //改变图片大小 function resizepic(thispic) { if(thispic.width>700) thispic.width=700; } //无级缩放图片大小 function bbimg(o) { var zoom=parseInt(o.style.zoom, 10)||100; zoom+=event.wheelDelta/12; if (zoom>0) o.style.zoom=zoom+’%’; } //双击鼠标滚动屏幕的代码 var currentpos,timer; function initialize() { timer=setInterval ("scrollwindow ()",30); } function sc() { clearInterval(timer); } function scrollwindow() { currentpos=document.body.scrollTop; window.scroll(0,++currentpos); if (currentpos !=document.body.scrollTop) sc(); } document.οnmοusedοwn=sc document.οndblclick=initialize //更改字体大小 var status0=’’; var curfontsize=10; var curlineheight=18; function fontZoomA(){ if(curfontsize>8){ document.getElementById(’fontzoom’).style.fontSize=(--curfontsize)+’pt’; document.getElementById(’fontzoom’).style.lineHeight=(--curlineheight)+’pt’; } } function fontZoomB(){ if(curfontsize<64){ document.getElementById(’fontzoom’).style.fontSize=(++curfontsize)+’pt’; document.getElementById(’fontzoom’).style.lineHeight=(++curlineheight)+’pt’; } } </script>