首頁新隨筆新文章聯系聚合

posts - 36,comments - 31,trackbacks - 0

2006年10月

>

日

一

二

三

四

五

六

24

25

26

27

28

29

30

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

常用鏈接

留言簿(1)

隨筆分類(18)

隨筆檔案(35)

文章分類

Spring

文章檔案(1)

2006年7月 (1)

搜索

閱讀排行榜

評論排行榜

JS技術

一、驗證類
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 、文本判?br>

一、驗證類
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 所有的表單的值都不能為空
??????<input onblur="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的字字母組成
??????<input onblur="if(/[^a-zA-Z]/g.test(this.value))alert(' 有錯 ')">
??4.2 判斷字符由字母和數字組成。
??????<input onblur="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;
??????}

3.7 復選框的全選，多選，全不選，反選
<form name=hrong>
<input type=checkbox name=All onclick="checkAll('mm')"> 全選 <br/>
<input type=checkbox name=mm onclick="checkItem('All')"><br/>
<input type=checkbox name=mm onclick="checkItem('All')"><br/>
<input type=checkbox name=mm onclick="checkItem('All')"><br/>
<input type=checkbox name=mm onclick="checkItem('All')"><br/>
<input type=checkbox name=mm onclick="checkItem('All')"><br/><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 onchange="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>
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>

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 onload="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>

１．身份證嚴格驗證：

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(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;";

//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 onclick='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' 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='return false' oncontextmenu='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??onclick=\"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?? onclick='parent.New_CW.hide();parent.blur()' style=\""+CSStext+"font-family:Webdings;\" title='Minimum'>0</span>";
temp += "<span id=Max?? onclick=\"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 onclick='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);

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

具有在輸入非數字字符不回顯的效果，即對非數字字符的輸入不作反應。
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<iLen;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.rows-1)
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;
?? }
??}
}
}

}

this.TableData=desc_array;
}
return;
}

????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<this.cols;j++){
??????if??(this.TableData[0][j]==Field){
???? colindex=j;
???? }
?? }
?? if (colindex!=-1){
??
?? for(i=1;i<this.rows;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<this.cols && this.rowindex<this.rows ;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;

在每個文本框的onblur事件中調用校驗代碼,并且每個文本框中onKeyDown事件中寫一個enter轉tab函數

// 回車鍵換為 tab
function enterToTab()
{
????if(event.srcElement.type != 'button' && event.srcElement.type != 'textarea'
?????? && event.keyCode == 13)
????{
????????event.keyCode = 9;
????}
}

posted on 2006-10-19 00:29 心隨我動閱讀(466) 評論(0) 編輯收藏所屬分類: JS

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: JavaScript校驗學習總結 JS技術