在b/s開發中經常用到的javaScript技術（轉）

參考文獻： http://feijipaopao.blogchina.com/ 在b/s開發中經常用到的javaScript技術（轉）- - 在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-05 13: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.1 email的判斷。 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 --> 和<-- F5 F11,F9,F1 4.4 屏蔽組合鍵ctrl+N 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、文本排序 一、驗證類 1、數字驗證內 1.1 整數 /^(-|/+)?/d+$/.test(str) 1.2 大於0的整數 （用於傳來的ID的驗證) /^/d+$/.test(str) 1.3 負整數的驗證 /^-/d+$/.test(str) 2、時間類 2.1 短時間，形如 (13:04:06) function isTime(str) { var a = str.match(/^(/d{1,2})(:)?(/d{1,2})/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})/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})/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 所有的表單的值都不能爲空 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.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; } 3.7 複選框的全選，多選，全不選，反選 全選 全選 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相關(客戶端動態增加行列） １．身份證嚴格驗證： ２．驗證ＩＰ地址 ３．加sp1後還能用的無邊框窗口！！ 電話號碼的驗證 要求： 　　(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}$) 具有在輸入非數字字符不回顯的效果，即對非數字字符的輸入不作反應。 function numbersonly(field,event){ var key,keychar; if(window.event){ key = window.event.keyCode; } else if (event){ key = event.which; } else{ return true } keychar = String.fromCharCode(key); if((key == null)||(key == 0)||(key == 8)||(key == 9)||(key == 13)||(key == 27)){ return true; } else if(("0123456789.").indexOf(keychar)>-1){ window.status = ""; return true; } else { window.status = "Field excepts numbers only"; return false; } } 驗證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 var str=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:右面多餘數據長度, function GetTableData(Obj,LeftLen,RightLen){ var MyObj=document.all(Obj); var iRow=MyObj.rows.length; var iLen=MyObj.rows[0].cells.length; var i,j; TableData=new Array(); for (i=0;i< iRow;i++){ TableData[i]=new Array(); for (j=0;j TableStr=MyObj.rows(i).cells(j).innerText; TableStr=TableStr.substring(LeftLen, TableStr.length-RightLen).Trim(); TableStr=TableStr.replace(/ /gi,"").replace(//r/n/ig,""); TableData[i][j]=TableStr; } } this.TableData=TableData; this.cols=this.TableData[0].length; this.rows=this.TableData.length; this.rowindex=0; } function movenext(Step){ if (this.rowindex>=this.rows){ return } if (Step=="" || typeof(Step)=="undefined") { if (this.rowindex this.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; } } } } function getfielddata(Field){ var colindex=-1; var i=0; if (typeof(Field) == "number"){ colindex=Field; } else { for (i=0;i if (this.TableData[0][i]==Field){ colindex=i; break; } } } if (colindex!=-1) { return this.TableData[this.rowindex][colindex]; } } function sort_desc(){//降序 var colindex=-1; var highindex=-1; desc_array=new Array(); var i,j; for (n=0; n Field=arguments[arguments.length-1-n]; for (i=0;i if (this.TableData[0][i]==Field){ colindex=i; break; } } if ( colindex==-1 ) return; else { desc_array[0]=this.TableData[0]; for(i=1;i desc_array[i]=this.TableData[1]; highindex=1; for(j=1;j if (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; } function sort_asc(){//升序 var colindex=-1; var highindex=-1; var i,j; for (n=0; n asc_array=new Array(); Field=arguments[arguments.length-1-n]; for (i=0;i if (this.TableData[0][i]==Field){ colindex=i; break; } } if ( colindex==-1 ) return; else { asc_array[0]=this.TableData[0]; for(i=1;i asc_array[i]=this.TableData[1]; highindex=1; for(j=1;j if (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; } function getData(Field,FieldValue){ var colindex=-1; var i,j; GetData=new Array(); if (typeof(Field)=="undefined" || typeof(FieldValue)=="undefined" ){ return this.TableData; } for(j=0;j if (this.TableData[0][j]==Field){ colindex=j; } } if (colindex!=-1){ for(i=1;i if (this.TableData[i][colindex]==FieldValue){ GetData[i]=new Array(); GetData[i]=this.TableData[i]; } } } return GetData; } function DeletE(){ this.TableData=this.TableData.slice(0,this.rowindex).concat(this.TableData.slice(this.rowindex+1,this.TableData.length)); this.rows=this.TableData.length; return; } function updateField(Field,FieldValue){ var colindex=-1; var i=0; if (typeof(Field) == "number"){ colindex=Field; } else { for (i=0;i if (this.TableData[0][i]==Field){ colindex=i; break; } } } if (colindex!=-1) { this.TableData[this.rowindex][colindex]=FieldValue; } } function movefirst(){ this.rowindex=0; } function movelast(){ this.rowindex=this.rows-1; } function String.prototype.Trim() {return this.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 function enterToTab() { if(event.srcElement.type != 'button' && event.srcElement.type != 'textarea' && event.keyCode == 13) { event.keyCode = 9; } } 有時候還需要自由編輯表格--- 給大家一個自由編輯表格的小例子,寫的有點亂,呵呵:） //===============================start================================ οnclick="editerTableCell('editer_table','no_editer')"> 自由編輯表格 單擊開始編輯按鈕,然後點擊各單元格編輯 2 3 4 5 6 one two three four five six 請單擊某個單元格進行編輯!