手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >在b/s开发中经常用到的javaScript技术
在b/s开发中经常用到的javaScript技术
摘要:一、验证类1、数字验证内1.1整数1.2大于0的整数(用于传来的ID的验证)1.3负整数的验证1.4整数不能大于iMax1.5整数不能小于i...

一、验证类

1、数字验证内

1.1整数

1.2大于0的整数(用于传来的ID的验证)

1.3负整数的验证

1.4整数不能大于iMax

1.5整数不能小于iMin

2、时间类

2.1短时间,形如(13:04:06)

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

2.3长时间,形如(2003-12-0513:04:06)

2.4只有年和月。形如(2003-05,或者2003-5)

2.5只有小时和分钟,形如(12:03)

3、表单类

3.1所有的表单的值都不能为空

3.2多行文本框的值不能为空。

3.3多行文本框的值不能超过sMaxStrleng

3.4多行文本框的值不能少于sMixStrleng

3.5判断单选框是否选择。

3.6判断复选框是否选择.

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

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

4、字符类

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

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

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

4.4字符串替换函数.Replace();

5、浏览器类

5.1判断浏览器的类型

5.2判断ie的版本

5.3判断客户端的分辨率

6、结合类

6.1email的判断。

6.2手机号码的验证

6.3身份证的验证

二、功能类

1、时间与相关控件类

1.1日历

1.2时间控件

1.3万年历

1.4显示动态显示时钟效果(文本,如OA中时间)

1.5显示动态显示时钟效果(图像,像手表)

2、表单类

2.1自动生成表单

2.2动态添加,修改,删除下拉框中的元素

2.3可以输入内容的下拉框

2.4多行文本框中只能输入iMax文字。如果多输入了,自动减少到iMax个文字(多用于短信发送)

3、打印类

3.1打印控件

4、事件类

4.1屏蔽右键

4.2屏蔽所有功能键

4.3-->和<--F5F11,F9,F1

4.4屏蔽组合键ctrl+N

5、网页设计类

5.1连续滚动的文字,图片(注意是连续的,两段文字和图片中没有空白出现)

5.2html编辑控件类

5.3颜色选取框控件

5.4下拉菜单

5.5两层或多层次的下拉菜单

5.6仿IE菜单的按钮。(效果如rongshuxa.com的导航栏目)

5.7状态栏,title栏的动态效果(例子很多,可以研究一下)

5.8双击后,网页自动滚屏

6、树型结构。

6.1asp+SQL版

6.2asp+xml+sql版

6.3java+sql或者java+sql+xml

7、无边框效果的制作

8、连动下拉框技术

9、文本排序

一、验证类

1、数字验证内

1.1整数

/^(-|+)?d+$/.test(str)

1.2大于0的整数(用于传来的ID的验证)

/^d+$/.test(str)

1.3负整数的验证

/^-d+$/.test(str)

2、时间类

2.1短时间,形如(13:04:06)

functionisTime(str)

{

vara=str.match(/^(d{1,2})(:)?(d{1,2})2(d{1,2})$/);

if(a==null){alert('输入的参数不是时间格式');returnfalse;}

if(a[1]>24||a[3]>60||a[4]>60)

{

alert("时间格式不对");

returnfalse

}

returntrue;

}

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

functionstrDateTime(str)

{

varr=str.match(/^(d{1,4})(-|/)(d{1,2})2(d{1,2})$/);

if(r==null)returnfalse;

vard=newDate(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-0513:04:06)

functionstrDateTime(str)

{

varreg=/^(d{1,4})(-|/)(d{1,2})2(d{1,2})(d{1,2}):(d{1,2}):(d{1,2})$/;

varr=str.match(reg);

if(r==null)returnfalse;

vard=newDate(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所有的表单的值都不能为空

<inputonblur="if(this.value.replace(/^s+|s+$/g,'')=='')alert('不能为空!')">

3.2多行文本框的值不能为空。

3.3多行文本框的值不能超过sMaxStrleng

3.4多行文本框的值不能少于sMixStrleng

3.5判断单选框是否选择。

3.6判断复选框是否选择.

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

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

4、字符类

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

<inputonblur="if(/[^a-zA-Z]/g.test(this.value))alert('有错')">

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

<inputonblur="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.1email的判断。

functionismail(mail)

{

return(newRegExp(/^w+((-w+)|(.w+))*@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+)*.[A-Za-z0-9]+$/).test(mail));

}

6.2手机号码的验证

6.3身份证的验证

functionisIdCardNo(num)

{

if(isNaN(num)){alert("输入的不是数字!");returnfalse;}

varlen=num.length,re;

if(len==15)

re=newRegExp(/^(d{6})()?(d{2})(d{2})(d{2})(d{3})$/);

elseif(len==18)

re=newRegExp(/^(d{6})()?(d{4})(d{2})(d{2})(d{3})(d)$/);

else{alert("输入的数字位数不对!");returnfalse;}

vara=num.match(re);

if(a!=null)

{

if(len==15)

{

varD=newDate("19"+a[3]+"/"+a[4]+"/"+a[5]);

varB=D.getYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5];

}

else

{

varD=newDate(a[3]+"/"+a[4]+"/"+a[5]);

varB=D.getFullYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5];

}

if(!B){alert("输入的身份证号"+a[0]+"里出生日期不对!");returnfalse;}

}

returntrue;

}

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

<formname=hrong>

<inputtype=checkboxname=Allonclick="checkAll('mm')">全选<br/>

<inputtype=checkboxname=mmonclick="checkItem('All')"><br/>

<inputtype=checkboxname=mmonclick="checkItem('All')"><br/>

<inputtype=checkboxname=mmonclick="checkItem('All')"><br/>

<inputtype=checkboxname=mmonclick="checkItem('All')"><br/>

<inputtype=checkboxname=mmonclick="checkItem('All')"><br/><br/>

<inputtype=checkboxname=All2onclick="checkAll('mm2')">全选<br/>

<inputtype=checkboxname=mm2onclick="checkItem('All2')"><br/>

<inputtype=checkboxname=mm2onclick="checkItem('All2')"><br/>

<inputtype=checkboxname=mm2onclick="checkItem('All2')"><br/>

<inputtype=checkboxname=mm2onclick="checkItem('All2')"><br/>

<inputtype=checkboxname=mm2onclick="checkItem('All2')"><br/>

</form>

<SCRIPTLANGUAGE="javascript">

functioncheckAll(str)

{

vara=document.getElementsByName(str);

varn=a.length;

for(vari=0;i<n;i++)

a[i].checked=window.event.srcElement.checked;

}

functioncheckItem(str)

{

vare=window.event.srcElement;

varall=eval("document.hrong."+str);

if(e.checked)

{

vara=document.getElementsByName(e.name);

all.checked=true;

for(vari=0;i<a.length;i++)

{

if(!a[i].checked){all.checked=false;break;}

}

}

elseall.checked=false;

}

</SCRIPT>

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

<inputtype=fileonchange="alert(this.value.match(/^(.*)(.)(.{1,8})$/)[3])">

画图:

<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>

写注册表:

<SCRIPT>

varWshShell=WScript.CreateObject("WScript.Shell");

WshShell.RegWrite("HKCUSoftwareACMEFortuneTeller",1,"REG_BINARY");

WshShell.RegWrite("HKCUSoftwareACMEFortuneTellerMindReader","Goocher!","REG_SZ");

varbKey=WshShell.RegRead("HKCUSoftwareACMEFortuneTeller");

WScript.Echo(WshShell.RegRead("HKCUSoftwareACMEFortuneTellerMindReader"));

WshShell.RegDelete("HKCUSoftwareACMEFortuneTellerMindReader");

WshShell.RegDelete("HKCUSoftwareACMEFortuneTeller");

WshShell.RegDelete("HKCUSoftwareACME");

</SCRIPT>

TABLAE相关(客户端动态增加行列)

<HTML>

<SCRIPTLANGUAGE="JScript">

functionnumberCells(){

varcount=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>

<BODYonload="numberCells()">

<TABLEid=mytableborder=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>

1.身份证严格验证:

<script>

varaCity={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:"国外"}

functioncidInfo(sId){

variSum=0

varinfo=""

if(!/^d{17}(d|x)$/i.test(sId))returnfalse;

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));

vard=newDate(sBirthday.replace(/-/g,"/"))

if(sBirthday!=(d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate()))return"Error:非法生日";

for(vari=17;i>=0;i--)iSum+=(Math.pow(2,i)%11)*parseInt(sId.charAt(17-i),11)

if(iSum%11!=1)return"Error:非法证号";

returnaCity[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>

2.验证IP地址

<SCRIPTLANGUAGE="javascript">

functionisip(s){

varcheck=function(v){try{return(v<=255&&v>=0)}catch(x){returnfalse}};

varre=s.split(".")

return(re.length==4)?(check(re[0])&&check(re[1])&&check(re[2])&&check(re[3])):false

}

vars="202.197.78.129";

alert(isip(s))

</SCRIPT>

3.加sp1后还能用的无边框窗口!!

<HTMLXMLNS:IE>

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">

<IE:DownloadID="include"STYLE="behavior:url(#default#download)"/>

<title>ChromelessWindow</title>

<SCRIPTLANGUAGE="JScript">

/*---SpecialThanksForandot---*/

/*

ThisfollowingcodearedesignedandwritenbyWindy_sk<seasonx@163.net>

Youcanuseitfreely,butumustheldallthecopyrightitems!

*/

/*---ThanksForandotAgain---*/

varCW_width=400;

varCW_height=300;

varCW_top=100;

varCW_left=100;

varCW_url="/";

varNew_CW=window.createPopup();

varCW_Body=New_CW.document.body;

varcontent="";

varCSStext="margin:1px;color:black;border:2pxoutset;border-style:expression(onmouseout=onmouseup=function(){this.style.borderStyle='outset'},onmousedown=function(){if(event.button!=2)this.style.borderStyle='inset'});background-color:buttonface;width:16px;height:14px;font-size:12px;line-height:11px;cursor:Default;";

//BuildWindow

include.startDownload(CW_url,function(source){content=source});

functioninsert_content(){

vartemp="";

CW_Body.style.overflow="hidden";

CW_Body.style.backgroundColor="white";

CW_Body.style.border="solidblack1px";

content=content.replace(/<a([^>]*)>/g,"<aonclick='parent.open(this.href);returnfalse'$1>");

temp+="<tablewidth=100%height=100%cellpadding=0cellspacing=0border=0>";

temp+="<trstyle=';font-size:12px;background:#0099CC;height:20;cursor:default'ondblclick="Max.innerText=Max.innerText=='1'?'2':'1';parent.if_max=!parent.if_max;parent.show_CW();"onmouseup='parent.drag_up(event)'onmousemove='parent.drag_move(event)'onmousedown='parent.drag_down(event)'onselectstart='returnfalse'oncontextmenu='returnfalse'>";

temp+="<tdstyle='color:#ffffff;padding-left:5px'>ChromelessWindowForIE6SP1</td>";

temp+="<tdstyle='color:#ffffff;padding-right:5px;'align=right>";

temp+="<spanid=Helponclick="alert('ChromelessWindowForIE6SP1-Ver1.0nnCodeByWindy_sknnSpecialThanksForandot')"style=""+CSStext+"font-family:System;padding-right:2px;">?</span>";

temp+="<spanid=Minonclick='parent.New_CW.hide();parent.blur()'style=""+CSStext+"font-family:Webdings;"title='Minimum'>0</span>";

temp+="<spanid=Maxonclick="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+="<spanid=Closeonclick='parent.opener=null;parent.close()'style=""+CSStext+"font-family:System;padding-right:2px;"title='Close'>x</span>";

temp+="</td></tr><tr><tdcolspan=2>";

temp+="<divid=includestyle='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);

varif_max=true;

functionshow_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;

//MoveWindow

vardrag_x,drag_y,draging=false

functiondrag_move(e){

if(draging){

New_CW.show(e.screenX-drag_x,e.screenY-drag_y,CW_width,CW_height);

returnfalse;

}

}

functiondrag_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();

}

functiondrag_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}$)

<scriptlanguage="javascript">

functionPhoneCheck(s){

varstr=s;

varreg=/(^[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>

<inputtype=textname="iphone">

<inputtype=buttononclick="PhoneCheck(document.all.iphone.value)"value="Check">

具有在输入非数字字符不回显的效果,即对非数字字符的输入不作反应。

functionnumbersonly(field,event){

varkey,keychar;

if(window.event){

key=window.event.keyCode;

}

elseif(event){

key=event.which;

}

else{

returntrue

}

keychar=String.fromCharCode(key);

if((key==null)||(key==0)||(key==8)||(key==9)||(key==13)||(key==27)){

returntrue;

}

elseif(("0123456789.").indexOf(keychar)>-1){

window.status="";

returntrue;

}

else{

window.status="Fieldexceptsnumbersonly";

returnfalse;

}

}

验证ip

str=document.RegExpDemo.txtIP.value;

if(/^(d{1,3}).(d{1,3}).(d{1,3}).(d{1,3})$/.test(str)==false)

{

window.alert('错误的IP地址格式');

document.RegExpDemo.txtIP.select();

document.RegExpDemo.txtIP.focus();

return;

}

if(RegExp.$1<1||RegExp.$1>254||RegExp.$2<0||RegExp.$2>254||RegExp.$3<0||RegExp.$3>254||RegExp.$4<1||RegExp.$4>254)

{

window.alert('错误的IP地址');

document.RegExpDemo.txtIP.select();

document.RegExpDemo.txtIP.focus();

return;

}

//剔除如010.020.020.03前面的0

varstr=str.replace(/0(d)/g,"$1");

str=str.replace(/0(d)/g,"$1");

window.alert(str);

【在b/s开发中经常用到的javaScript技术】相关文章:

b/s开发常用javaScript技术第1/4页

JavaScript调试技巧

用JavaScript实现对话框的教程

javascript操作表格

在JS方法中返回多个值的方法汇总

用javascript动态注释掉HTML代码

Email地址加密javascript版

Node.js中JavaScript操作MySQL的常用方法整理

在JavaScript中使用NaN值的方法

编写高质量JavaScript代码的基本要点

精品推荐
分类导航