欢迎来到福编程网,本站提供各种互联网专业知识!

B/S开发中常用javaScript技术与代码

发布时间:2007-03-09 作者: 来源:转载
在b/s开发中经常用到的javaScript技术一、验证类1、数字验证内1.1整数1.2大于0的整数(用于传来的ID的验证)1.3负整数的验证1.4整数不能大于iMax1.5整数不能小于iMin2、时间类2.1短时间,形如(13:04:06)2.2短日期,形如(2003-12-05)2.3长时间,形如(2003-12-05
在b/s开发中经常用到的javaScript技术
一、验证类
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所有的表单的值都不能为空

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判断字符由字母和数字,下划线,点号组成.且开头的只能是下划线和字母
/^([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复选框的全选,多选,全不选,反选

全选







全选







functioncheckAll(str)
{
vara=document.getElementsByName(str);
varn=a.length;
for(vari=0;ia[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{
if(!a[i].checked){all.checked=false;break;}
}
}
elseall.checked=false;
}

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

画图:
id=S
style="LEFT:0px;WIDTH:392px;TOP:0px;HEIGHT:240px"
height=240
width=392
classid="clsid:369303C2-D7AC-11D0-89D5-00A0C90833E6">

写注册表:

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


functionnumberCells(){
varcount=0;
for(i=0;ifor(j=0;jdocument.all.mytable.rows(i).cells(j).innerText=count;
count++;
}
}
}








1.身份证严格验证:

2.验证IP地址

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

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



ChromelessWindow


/*---SpecialThanksForandot---*/

/*
ThisfollowingcodearedesignedandwritenbyWindy_sk
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(/]*)>/g,"");
temp+="";
temp+="";
temp+="ChromelessWindowForIE6SP1";
temp+="";
temp+="?";
temp+="0";
temp+="1";
temp+="x";
temp+="";
temp+="";
temp+=content;
temp+="

";
temp+="";
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;
}


电话号码的验证

要求:
(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}$)



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


具有在输入非数字字符不回显的效果,即对非数字字符的输入不作反应。
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);


//一下是取数据的类
//Obj参数指定数据的来源(限定Table),默认第一行为字段名称行
//GetTableData类提供MoveNext方法,参数是表的行向上或向下移动的位数,正数向下移动,负数向上.
//GetFieldData方法获得指定的列名的数据
//Sort_desc方法对指定的列按降序排列
//Sort_asc方法对指定的列按升序排列
//GetData方法返回字段值为特定值的数据数组,提供数据,可以在外部进行其他处理
//Delete方法删除当前记录,数组减少一行
//初始化,Obj:table的名字,Leftlen:左面多余数据长度,Rightlen:右面多余数据长度,
functionGetTableData(Obj,LeftLen,RightLen){
varMyObj=document.all(Obj);
variRow=MyObj.rows.length;
variLen=MyObj.rows[0].cells.length;
vari,j;

TableData=newArray();
for(i=0;iTableData[i]=newArray();
for(j=0;jTableStr=MyObj.rows(i).cells(j).innerText;
TableStr=TableStr.substring(LeftLen,TableStr.length-RightLen).Trim();
TableStr=TableStr.replace(//gi,"").replace(/rn/ig,"");
TableData[i][j]=TableStr;
}
}

this.TableData=TableData;
this.cols=this.TableData[0].length;
this.rows=this.TableData.length;
this.rowindex=0;
}


functionmovenext(Step){
if(this.rowindex>=this.rows){
return
}

if(Step==""||typeof(Step)=="undefined"){
if(this.rowindexthis.rowindex++;
return;

}
else{
if(this.rowindex+Step<=this.rows-1&&this.rowindex+Step>=0){
this.rowindex=this.rowindex+Step;
}
else
{
if(this.rowindex+Step<0){
this.rowindex=0;
return;
}
if(this.rowindex+Step>this.rows-1){
this.rowindex=this.rows-1;
return;
}
}
}
}


functiongetfielddata(Field){
varcolindex=-1;
vari=0;
if(typeof(Field)=="number"){
colindex=Field;
}
else
{
for(i=0;iif(this.TableData[0][i]==Field){
colindex=i;
break;
}
}
}
if(colindex!=-1){
returnthis.TableData[this.rowindex][colindex];
}

}

functionsort_desc(){//降序
varcolindex=-1;
varhighindex=-1;
desc_array=newArray();
vari,j;
for(n=0;nField=arguments[arguments.length-1-n];
for(i=0;iif(this.TableData[0][i]==Field){
colindex=i;
break;
}
}
if(colindex==-1)
return;
else
{
desc_array[0]=this.TableData[0];
for(i=1;idesc_array[i]=this.TableData[1];
highindex=1;
for(j=1;jif(desc_array[i][colindex]desc_array[i]=this.TableData[j];
highindex=j;
}

}
if(highindex!=-1)
this.TableData=this.TableData.slice(0,highindex).concat(this.TableData.slice(highindex+1,this.TableData.length));
}
}


this.TableData=desc_array;
}
return;
}

functionsort_asc(){//升序
varcolindex=-1;
varhighindex=-1;
vari,j;
for(n=0;nasc_array=newArray();
Field=arguments[arguments.length-1-n];
for(i=0;iif(this.TableData[0][i]==Field){
colindex=i;
break;
}
}
if(colindex==-1)
return;
else
{
asc_array[0]=this.TableData[0];
for(i=1;iasc_array[i]=this.TableData[1];
highindex=1;
for(j=1;jif(asc_array[i][colindex]>this.TableData[j][colindex]){
asc_array[i]=this.TableData[j];
highindex=j;

}

}
if(highindex!=-1)
this.TableData=this.TableData.slice(0,highindex).concat(this.TableData.slice(highindex+1,this.TableData.length));

}
}


this.TableData=asc_array;
}
return;
}

functiongetData(Field,FieldValue){
varcolindex=-1;
vari,j;

GetData=newArray();
if(typeof(Field)=="undefined"||typeof(FieldValue)=="undefined"){
returnthis.TableData;
}

for(j=0;jif(this.TableData[0][j]==Field){
colindex=j;
}
}
if(colindex!=-1){

for(i=1;iif(this.TableData[i][colindex]==FieldValue){
GetData[i]=newArray();
GetData[i]=this.TableData[i];
}
}
}
returnGetData;
}
functionDelete(){
this.TableData=this.TableData.slice(0,this.rowindex).concat(this.TableData.slice(this.rowindex+1,this.TableData.length));
this.rows=this.TableData.length;
return;
}
functionupdateField(Field,FieldValue){
varcolindex=-1;
vari=0;
if(typeof(Field)=="number"){
colindex=Field;
}
else
{
for(i=0;iif(this.TableData[0][i]==Field){
colindex=i;
break;
}
}
}
if(colindex!=-1){
this.TableData[this.rowindex][colindex]=FieldValue;
}


}
functionmovefirst(){
this.rowindex=0;
}
functionmovelast(){
this.rowindex=this.rows-1;
}
functionString.prototype.Trim(){returnthis.replace(/(^s*)|(s*$)/g,"");}
GetTableData.prototype.MoveNext=movenext;
GetTableData.prototype.GetFieldData=getfielddata;
GetTableData.prototype.Sort_asc=sort_asc;
GetTableData.prototype.Sort_desc=sort_desc;
GetTableData.prototype.GetData=getData;
GetTableData.prototype.Delete=Delete;
GetTableData.prototype.UpdateField=updateField;
GetTableData.prototype.MoveFirst=movefirst;

具体的例子:http://202.119.73.208/NetEAn/com/test/jsprint.htm

在每个文本框的onblur事件中调用校验代码,并且每个文本框中onKeyDown事件中写一个enter转tab函数

//回车键换为tab
functionenterToTab()
{
if(event.srcElement.type!='button'&&event.srcElement.type!='textarea'
&&event.keyCode==13)
{
event.keyCode=9;
}
}

有时候还需要自由编辑表格---
给大家一个自由编辑表格的小例子,写的有点乱,呵呵:)

//===============================start================================





测试修改表格








onclick="editerTableCell('editer_table','no_editer')">

自由编辑表格


单击开始编辑按钮,然后点击各单元格编辑
2
3


4
5
6


one
two
three


four
five
six








请单击某个单元格进行编辑!



相关推荐