javascript常用功能匯總

2024-05-06 16:22:44

字體：大中小

供稿：網(wǎng)友

本文給大家總結(jié)了12個(gè)javascript常用的基本功能，十分的實(shí)用，這里推薦給大家,需要的朋友可以參考下

1.javascript的數(shù)組API：

//定義數(shù)組

var pageIds = new Array();

pageIds.push('A');

數(shù)組長(zhǎng)度

pageIds.length;

//shift：刪除原數(shù)組第一項(xiàng)，并返回刪除元素的值；如果數(shù)組為空則返回undefined

var a = [1,2,3,4,5];

var b = a.shift(); //a：[2,3,4,5] b：1

//unshift：將參數(shù)添加到原數(shù)組開(kāi)頭，并返回?cái)?shù)組的長(zhǎng)度

var a = [1,2,3,4,5];

var b = a.unshift(-2,-1); //a：[-2,-1,1,2,3,4,5] b：7

//注：在IE6.0下測(cè)試返回值總為undefined，F(xiàn)F2.0下測(cè)試返回值為7，所以這個(gè)方法的返回值不可靠，需要用返回值時(shí)可用splice代替本方法來(lái)使用。

//pop：刪除原數(shù)組最后一項(xiàng)，并返回刪除元素的值；如果數(shù)組為空則返回undefined

var a = [1,2,3,4,5];

var b = a.pop(); //a：[1,2,3,4] b：5

//push：將參數(shù)添加到原數(shù)組末尾，并返回?cái)?shù)組的長(zhǎng)度

var a = [1,2,3,4,5];

var b = a.push(6,7); //a：[1,2,3,4,5,6,7] b：7

//concat：返回一個(gè)新數(shù)組，是將參數(shù)添加到原數(shù)組中構(gòu)成的

var a = [1,2,3,4,5];

var b = a.concat(6,7); //a：[1,2,3,4,5] b：[1,2,3,4,5,6,7]

//splice(start,deleteCount,val1,val2,)：從start位置開(kāi)始刪除deleteCount項(xiàng)，并從該位置起插入val1,val2,

var a = [1,2,3,4,5];

var b = a.splice(2,2,7,8,9); //a：[1,2,7,8,9,5] b：[3,4]

var b = a.splice(0,1); //同shift

a.splice(0,0,-2,-1); var b = a.length; //同unshift

var b = a.splice(a.length-1,1); //同pop

a.splice(a.length,0,6,7); var b = a.length; //同push

//reverse：將數(shù)組反序

var a = [1,2,3,4,5];

var b = a.reverse(); //a：[5,4,3,2,1] b：[5,4,3,2,1]

//sort(orderfunction)：按指定的參數(shù)對(duì)數(shù)組進(jìn)行排序

var a = [1,2,3,4,5];

var b = a.sort(); //a：[1,2,3,4,5] b：[1,2,3,4,5]

//slice(start,end)：返回從原數(shù)組中指定開(kāi)始下標(biāo)到結(jié)束下標(biāo)之間的項(xiàng)組成的新數(shù)組

var a = [1,2,3,4,5];

var b = a.slice(2,5); //a：[1,2,3,4,5] b：[3,4,5]

//join(separator)：將數(shù)組的元素組起一個(gè)字符串，以separator為分隔符，省略的話則用默認(rèn)用逗號(hào)為分隔符

var a = [1,2,3,4,5];

var b = a.join("|"); //a：[1,2,3,4,5] b："1|2|3|4|5"

2.dom最常用API：

//document方法：

getElementById(id) Node 返回指定結(jié)點(diǎn)的引用

getElementsByTagName(name) NodeList 返回文檔中所有匹配的元素的集合

createElement(name) Node Node

createTextNode(text) Node 創(chuàng)建一個(gè)純文本結(jié)點(diǎn)

ownerDocument Document 指向這個(gè)節(jié)點(diǎn)所屬的文檔

documentElement Node 返回html節(jié)點(diǎn)

document.body Node 返回body節(jié)點(diǎn)

//element方法：

getAttribute(attributeName) String 返回指定屬性的值

setAttribute(attributeName,value) String 給屬性賦值

removeAttribute(attributeName) String 移除指定屬性和它的值

getElementsByTagName(name) NodeList 返回結(jié)點(diǎn)內(nèi)所有匹配的元素的集合

//node方法：

appendChild(child) Node 給指定結(jié)點(diǎn)添加一個(gè)新的子結(jié)點(diǎn)

removeChild(child) Node 移除指定結(jié)點(diǎn)的子結(jié)點(diǎn)

replaceChild(newChild,oldChild) Node 替換指定結(jié)點(diǎn)的子結(jié)點(diǎn)

insertBefore(newChild,refChild) Node 在同一層級(jí)的結(jié)點(diǎn)前面插入新結(jié)點(diǎn)

hasChildNodes() Boolean 如果結(jié)點(diǎn)有子結(jié)點(diǎn)則返回true

//node屬性：

nodeName String 以字符串的格式存放結(jié)點(diǎn)的名稱

nodeType String 以整型數(shù)據(jù)格式存放結(jié)點(diǎn)的類型

nodeValue String 以可用的格式存放結(jié)點(diǎn)的值

parentNode Node 指向結(jié)點(diǎn)的父結(jié)點(diǎn)的引用

childNodes NodeList 指向子結(jié)點(diǎn)的引用的集合

firstChild Node 指向子結(jié)點(diǎn)結(jié)合中的第一個(gè)子結(jié)點(diǎn)的引用

lastChild Node 指向子結(jié)點(diǎn)結(jié)合中的最后一個(gè)子結(jié)點(diǎn)的引用

previousSibling Node 指向前一個(gè)兄弟節(jié)點(diǎn)；如果這個(gè)節(jié)點(diǎn)就是兄弟節(jié)點(diǎn)，那么該值為null

nextSibling Node 指向后一個(gè)兄弟節(jié)點(diǎn)；如果這個(gè)節(jié)點(diǎn)就是兄弟節(jié)點(diǎn)，那么該值為null

3.網(wǎng)上搜藏的一個(gè)map對(duì)象:

function HashMap()

{

/** Map 大小 **/

var size = 0;

/** 對(duì)象 **/

var entry = new Object();

/** 存 **/

this.put = function (key , value)

{

if(!this.containsKey(key))

{

size ++ ;

}

entry[key] = value;

}

/** 取 **/

this.get = function (key)

{

return this.containsKey(key) ? entry[key] : null;

}

/** 刪除 **/

this.remove = function ( key )

{

if( this.containsKey(key) && ( delete entry[key] ) )

{

size --;

}

}

/** 是否包含 Key **/

this.containsKey = function ( key )

{

return (key in entry);

}

/** 是否包含 Value **/

this.containsValue = function ( value )

{

for(var prop in entry)

{

if(entry[prop] == value)

{

return true;

}

}

return false;

}

/** 所有 Value **/

this.values = function ()

{

var values = new Array();

for(var prop in entry)

{

values.push(entry[prop]);

}

return values;

}

/** 所有 Key **/

this.keys = function ()

{

var keys = new Array();

for(var prop in entry)

{

keys.push(prop);

}

return keys;

}

/** Map Size **/

this.size = function ()

{

return size;

}

/* 清空 */

this.clear = function ()

{

size = 0;

entry = new Object();

}

}

var map = new HashMap();

/*

map.put("A","1");

map.put("B","2");

map.put("A","5");

map.put("C","3");

map.put("A","4");

*/

/*

alert(map.containsKey("XX"));

alert(map.size());

alert(map.get("A"));

alert(map.get("XX"));

map.remove("A");

alert(map.size());

alert(map.get("A"));

*/

/** 同時(shí)也可以把對(duì)象作為 Key **/

/*

var arrayKey = new Array("1","2","3","4");

var arrayValue = new Array("A","B","C","D");

map.put(arrayKey,arrayValue);

var value = map.get(arrayKey);

for(var i = 0 ; i < value.length ; i++)

{

//alert(value[i]);

}

*/

/** 把對(duì)象做為Key時(shí) ，自動(dòng)調(diào)用了該對(duì)象的 toString() 方法其實(shí)最終還是以String對(duì)象為Key**/

/** 如果是自定義對(duì)象那自己得重寫(xiě) toString() 方法否則 . 就是下面的結(jié)果 **/

function MyObject(name)

{

this.name = name;

}

/**

function MyObject(name)

{

this.name = name;

this.toString = function ()

{

return this.name;

}

}

**/

var object1 = new MyObject("小張");

var object2 = new MyObject("小名");

map.put(object1,"小張");

map.put(object2,"小名");

alert(map.get(object1));

alert(map.get(object2));

map.remove("xxxxx");

alert(map.size());

/** 運(yùn)行結(jié)果小名小名 size = 1 **/

/** 如果改成復(fù)寫(xiě)toString()方法的對(duì)象 , 效果就完全不一樣了 **/

4.常用的數(shù)字函數(shù)

//·數(shù)字型(Number)

//1.聲明

var i = 1;

var i = new Number(1);

//2.字符串與數(shù)字間的轉(zhuǎn)換

var i = 1;

var str = i.toString(); //結(jié)果: "1"

var str = new String(i); //結(jié)果: "1"

i = parseInt(str); //結(jié)果: 1

i = parseFloat(str); //結(jié)果: 1.0

//注意: parseInt,parseFloat會(huì)把一個(gè)類似于"32G"的字符串,強(qiáng)制轉(zhuǎn)換成32

//3.判斷是否為有效的數(shù)字

var i = 123; var str = "string";

if( typeof i == "number" ){ } //true

//某些方法(如:parseInt,parseFloat)會(huì)返回一個(gè)特殊的值NaN(Not a Number)

//請(qǐng)注意第2點(diǎn)中的[注意],此方法不完全適合判斷一個(gè)字符串是否是數(shù)字型!!

i = parseInt(str);

if( isNaN(i) ){ }

//4.數(shù)字型比較

//此知識(shí)與[字符串比較]相同

///5.小數(shù)轉(zhuǎn)整數(shù)

var f = 1.5;

var i = Math.round(f); //結(jié)果:2 (四舍五入)

var i = Math.ceil(f); //結(jié)果:2 (返回大于f的最小整數(shù))

var i = Math.floor(f); //結(jié)果:1 (返回小于f的最大整數(shù))

//6.格式化顯示數(shù)字

var i = 3.14159;

//格式化為兩位小數(shù)的浮點(diǎn)數(shù)

var str = i.toFixed(2); //結(jié)果: "3.14"

//格式化為五位數(shù)字的浮點(diǎn)數(shù)(從左到右五位數(shù)字,不夠補(bǔ)零)

var str = i.toPrecision(5); //結(jié)果: "3.1415"

//7.X進(jìn)制數(shù)字的轉(zhuǎn)換

//不是很懂 -.-

var i = parseInt("0x1f",16);

var i = parseInt(i,10);

var i = parseInt("11010011",2);

//8.隨機(jī)數(shù)

//返回0-1之間的任意小數(shù)

var rnd = Math.random();

//返回0-n之間的任意整數(shù)(不包括n)

var rnd = Math.floor(Math.random() * n)

5.網(wǎng)上搜藏的js堆棧:

function stack(){

if(this.top==undefined){

//初始化堆棧的頂部指針和數(shù)據(jù)存放域

this.top=0;

this.unit=new Array();

}

this.push=function(pushvalue){

//定義壓入堆棧的方法

this.unit[this.top]=pushvalue;

this.top+=1;

}

this.readAllElements=function(){

//定義讀取所有數(shù)據(jù)的方法

if(this.top==0){

alert("當(dāng)前棧空，無(wú)法讀取數(shù)據(jù)");

return("");

}

var count=0;

var outStr="";

for(count=0;count<this.top;count++){

outStr+=this.unit[count]+",";

}

return(outStr);

}

this.pop=function(){

//定義彈出堆棧的方法

if(this.top==0){

alert("當(dāng)前棧空，無(wú)法彈出數(shù)據(jù)");

return("");

}

var popTo=this.unit[this.top-1];

this.top--;

return(popTo);

/* 從堆棧彈出數(shù)據(jù)，頂部指針減一，不過(guò)這里沒(méi)有做到資源的釋放，也

就是說(shuō)數(shù)據(jù)仍然存在于this.unit的數(shù)組中，只不過(guò)無(wú)法訪問(wèn)罷了。目前

我也沒(méi)想到好的辦法解決。*/

}

}

6.最常用的JavaScript日期函數(shù):

//·日期型(Date)

//1.聲明

var myDate = new Date(); //系統(tǒng)當(dāng)前時(shí)間

var myDate = new Date(yyyy, mm, dd, hh, mm, ss);

var myDate = new Date(yyyy, mm, dd);

var myDate = new Date("monthName dd, yyyy hh:mm:ss");

var myDate = new Date("monthName dd, yyyy");

var myDate = new Date(epochMilliseconds);

//2.獲取時(shí)間的某部份

var myDate = new Date();

myDate.getYear(); //獲取當(dāng)前年份(2位)

myDate.getFullYear(); //獲取完整的年份(4位,1970-????)

myDate.getMonth(); //獲取當(dāng)前月份(0-11,0代表1月)

myDate.getDate(); //獲取當(dāng)前日(1-31)

myDate.getDay(); //獲取當(dāng)前星期X(0-6,0代表星期天)

myDate.getTime(); //獲取當(dāng)前時(shí)間(從1970.1.1開(kāi)始的毫秒數(shù)) 時(shí)間戳！！

myDate.getHours(); //獲取當(dāng)前小時(shí)數(shù)(0-23)

myDate.getMinutes(); //獲取當(dāng)前分鐘數(shù)(0-59)

myDate.getSeconds(); //獲取當(dāng)前秒數(shù)(0-59)

myDate.getMilliseconds(); //獲取當(dāng)前毫秒數(shù)(0-999)

myDate.toLocaleDateString(); //獲取當(dāng)前日期

myDate.toLocaleTimeString(); //獲取當(dāng)前時(shí)間

myDate.toLocaleString( ); //獲取日期與時(shí)間

//3.計(jì)算之前或未來(lái)的時(shí)間

var myDate = new Date();

myDate.setDate(myDate.getDate() + 10); //當(dāng)前時(shí)間加10天

//類似的方法都基本相同,以set開(kāi)頭,具體參考第2點(diǎn)

//4.計(jì)算兩個(gè)日期的偏移量

var i = daysBetween(beginDate,endDate); //返回天數(shù)

var i = beginDate.getTimezoneOffset(endDate); //返回分鐘數(shù)

//5.檢查有效日期

//checkDate() 只允許"mm-dd-yyyy"或"mm/dd/yyyy"兩種格式的日期

if( checkDate("2006-01-01") ){ }

//正則表達(dá)式(自己寫(xiě)的檢查 yyyy-mm-dd, yy-mm-dd, yyyy/mm/dd, yy/mm/dd 四種)

var r = /^(/d{2}|/d{4})[//-]/d{1,2}[//-]/d{1,2}$/;

if( r.test( myString ) ){ }

7.最常用字符串函數(shù)API:

//·字符串(String)

//1.聲明

var myString = new String("Every good boy does fine.");

var myString = "Every good boy does fine.";

//2.字符串連接

var myString = "Every " + "good boy " + "does fine.";

var myString = "Every "; myString += "good boy does fine.";

//3.截取字符串

//截取第 6 位開(kāi)始的字符

var myString = "Every good boy does fine.";

var section = myString.substring(6); //結(jié)果: "good boy does fine."

//截取第 0 位開(kāi)始至第 10 位為止的字符

var myString = "Every good boy does fine.";

var section = myString.substring(0,10); //結(jié)果: "Every good"

//截取從第 11 位到倒數(shù)第 6 位為止的字符

var myString = "Every good boy does fine.";

var section = myString.slice(11,-6); //結(jié)果: "boy does"

//從第 6 位開(kāi)始截取長(zhǎng)度為 4 的字符

var myString = "Every good boy does fine.";

var section = myString.substr(6,4); //結(jié)果: "good"

//4.轉(zhuǎn)換大小寫(xiě)

var myString = "Hello";

var lcString = myString.toLowerCase(); //結(jié)果: "hello"

var ucString = myString.toUpperCase(); //結(jié)果: "HELLO"

//5.字符串比較

var aString = "Hello!";

var bString = new String("Hello!");

if( aString == "Hello!" ){ } //結(jié)果: true

if( aString == bString ){ } //結(jié)果: true

if( aString === bString ){ } //結(jié)果: false (兩個(gè)對(duì)象不同,盡管它們的值相同)

//6.檢索字符串

var myString = "hello everybody.";

// 如果檢索不到會(huì)返回-1,檢索到的話返回在該串中的起始位置

if( myString.indexOf("every") > -1 ){ } //結(jié)果: true

////7.查找替換字符串

var myString = "I is your father.";

var result = myString.replace("is","am"); //結(jié)果: "I am your father."

//8.特殊字符:

///b : 后退符 /t : 水平制表符

///n : 換行符 /v : 垂直制表符

///f : 分頁(yè)符 /r : 回車符

///" : 雙引號(hào) /' : 單引號(hào)

//// : 反斜桿

//9.將字符轉(zhuǎn)換成Unicode編碼

var myString = "hello";

var code = myString.charCodeAt(3); //返回"l"的Unicode編碼(整型)

var char = String.fromCharCode(66); //返回Unicode為66的字符

//10.將字符串轉(zhuǎn)換成URL編碼

var myString = "hello all";

var code = encodeURI(myString); //結(jié)果: "hello%20all"

var str = decodeURI(code); //結(jié)果: "hello all"

//相應(yīng)的還有: encodeURIComponent() decodeURIComponent()

8.數(shù)學(xué)函數(shù):

·Math對(duì)象

1. Math.abs(num) : 返回num的絕對(duì)值

2. Math.acos(num) : 返回num的反余弦值

3. Math.asin(num) : 返回num的反正弦值

4. Math.atan(num) : 返回num的反正切值

5. Math.atan2(y,x) : 返回y除以x的商的反正切值

6. Math.ceil(num) : 返回大于num的最小整數(shù)

7. Math.cos(num) : 返回num的余弦值

8. Math.exp(x) : 返回以自然數(shù)為底,x次冪的數(shù)

9. Math.floor(num) : 返回小于num的最大整數(shù)

10.Math.log(num) : 返回num的自然對(duì)數(shù)

11.Math.max(num1,num2) : 返回num1和num2中較大的一個(gè)

12.Math.min(num1,num2) : 返回num1和num2中較小的一個(gè)

13.Math.pow(x,y) : 返回x的y次方的值

14.Math.random() : 返回0到1之間的一個(gè)隨機(jī)數(shù)

15.Math.round(num) : 返回num四舍五入后的值

16.Math.sin(num) : 返回num的正弦值

17.Math.sqrt(num) : 返回num的平方根

18.Math.tan(num) : 返回num的正切值

19.Math.E : 自然數(shù)(2.718281828459045)

20.Math.LN2 : 2的自然對(duì)數(shù)(0.6931471805599453)

21.Math.LN10 : 10的自然對(duì)數(shù)(2.302585092994046)

22.Math.LOG2E : log 2 為底的自然數(shù)(1.4426950408889634)

23.Math.LOG10E : log 10 為底的自然數(shù)(0.4342944819032518)

24.Math.PI : π(3.141592653589793)

25.Math.SQRT1_2 : 1/2的平方根(0.7071067811865476)

26.Math.SQRT2 : 2的平方根(1.4142135623730951)

9.瀏覽器特征函數(shù):

//1.瀏覽器名稱

//IE : "Microsoft Internet Explorer"

//NS : "Netscape"

var browserName = navigator.appName;

//2.瀏覽器版本

var browserVersion = navigator.appVersion;

//3.客戶端操作系統(tǒng)

var isWin = ( navigator.userAgent.indexOf("Win") != -1 );

var isMac = ( navigator.userAgent.indexOf("Mac") != -1 );

var isUnix = ( navigator.userAgent.indexOf("X11") != -1 );

//4.判斷是否支持某對(duì)象,方法,屬性

//當(dāng)一個(gè)對(duì)象,方法,屬性未定義時(shí)會(huì)返回undefined或null等,這些特殊值都是false

if( document.images ){ }

if( document.getElementById ){ }

//5.檢查瀏覽器當(dāng)前語(yǔ)言

if( navigator.userLanguage ){ var l = navigator.userLanguage.toUpperCase(); }

//6.檢查瀏覽器是否支持Cookies

if( navigator.cookieEnabled ){ }

10.JavaScript面向?qū)ο蟮姆椒▽?shí)現(xiàn)繼承:call方法

// 動(dòng)物類 animal

function animal(bSex){

this.sex = bSex

this.getSex = function(){

return this.sex

}

}

// 類靜態(tài)變量 (如果你不修改它的話～～)

animal.SEX_G = new Object(); // 雌性

animal.SEX_B = new Object(); // 雄性

// 動(dòng)物子類鳥(niǎo)

function bird(bSex){

animal.call(this, bSex);

this.fly = function(iSpeed){

alert("飛行時(shí)速高達(dá) " + iSpeed);

}

}

// 動(dòng)物子類魚(yú)

function fish(bSex){

animal.call(this, bSex);

this.swim = function(iSpeed){

alert("游動(dòng)時(shí)速高達(dá) " + iSpeed)

}

}

// 魚(yú) 鳥(niǎo) 雜交品種。。。

function crossBF(bSex){

bird.call(this, bSex);

fish.call(this, bSex);

}

var oPet = new crossBF(animal.SEX_G); // 雌性魚(yú)鳥(niǎo)

alert(oPet.getSex() == animal.SEX_G ? "雌性" : "雄性");

oPet.fly(124)

oPet.swim(254)

11.用面向?qū)ο蟮木幊谭绞綄?xiě)JavaScript:

MyTool = new function(){

/**

* 返回非空字符串,如果有默認(rèn)值就返回默認(rèn)字符串.

*/

this.notNull = function(str,defaultStr){

if(typeof(str)=="undefined"||str==null||str==''){

if(defaultStr)

return defaultStr;

else

return '';

}

else{

return str;

}

}

}

rootId = MyTool.notNull(rootId,'001000');

12.常用的js方法,

包括表單校驗(yàn)的一些方法,下拉菜單常用的方法等等:

/**

* 對(duì)JSON對(duì)象轉(zhuǎn)換為字符串.

* @param {json對(duì)象} json

* @return {json字符串}

*/

function jsonObj2Str(json) {

var str = "{";

for (prop in json) {

str += prop + ":" + json[prop] + ",";

}

str = str.substr(0, str.length - 1);

str += "}";

return str;

}

/**

* 將json字符串轉(zhuǎn)換為json對(duì)象.

* @param {json字符串} jsonstr

* @return {json對(duì)象}

*/

function jsonStr2Obj(jsonstr) {

return eval("("+jsonstr+")");

}

/**

* 得到一個(gè)元素的left坐標(biāo)值.

* @param {dom對(duì)象} obj

* @return {位置值}

*/

function getLeft(obj){

var offset=e.offsetLeft;

if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);

return offset;

}

/**

* 得到一個(gè)元素的絕對(duì)位置的top坐標(biāo)值.

* @param {dom對(duì)象} obj

* @return {位置值}

*/

function getTop(obj){

var offset=e.offsetTop;

if(e.offsetParent!=null) offset+=getTop(e.offsetParent);

return offset;

}

/**

* 刪除一個(gè)字符串的左右空格.

* @param {原始字符串} str

* @return {刪除空格之后的字符串}

*/

function trim(str)

{

return str.replace(/(^/s*)|(/s*$)/g,"");

}

/**

* 根據(jù)id取出一個(gè)元素.

* @param {元素id值} str

* @return {dom對(duì)象}

*/

function $(str) {

return document.getElementById(str);

}

/**

* 按name獲取一個(gè)對(duì)象.

* @param {元素name值} str

* @return {根據(jù)name返回的第一個(gè)對(duì)象}

*/

function $byName(str) {

var arr = document.getElementsByName(str);

if (arr)

return arr[0];

else

return null;

}

/***************以下方法和表單驗(yàn)證相關(guān)*************************************************/

/**

* 返回非空字符串,如果有默認(rèn)值就返回默認(rèn)字符串.

* @param {要進(jìn)行轉(zhuǎn)換的原字符串} str

* @param {默認(rèn)值} defaultStr

* @return {返回結(jié)果}

*/

function notNull(str, defaultStr) {

if (typeof(str) == "undefined" || str == null || str == '') {

if (defaultStr)

return defaultStr;

else

return '';

} else {

return str;

}

}

/**

* 比較兩個(gè)日期大小.

* @param {較小日期的文本框id} smallDate

* @param {較大日期的文本框id} bigDate

* @param {出錯(cuò)的提示信息} msg

*/

function compareTwoDate(smallDate, bigDate, msg) {

var v1 = $(smallDate).value;

var v2 = $(bigDate).value;

if (v1 >= v2) {

alert(msg);

v2.focus();

return false;

}

return true;

}

/**

* 比較兩個(gè)金額大小的方法.

* @param {較小的金額} smallNum

* @param {較大的金額} bigNum

* @param {出錯(cuò)提示信息} msg

* @return {Boolean}

*/

function compareTwoNum(smallNum, bigNum, msg) {

var v1 = $(smallNum).value;

var v2 = $(bigNum).value;

if (parseFloat(v1) >= parseFloat(v2)) {

alert(msg);

v2.focus();

return false;

}

return true;

}

/**

* 檢查文本框的長(zhǎng)度是否超出指定長(zhǎng)度.

* @param {文本id} textId

* @param {文本框的最大長(zhǎng)度} len

* @param {文本框描述內(nèi)容} msg

* @return {有錯(cuò)就返回false,否則返回true}

*/

function checkLength(textId, len, msg) {

obj = $(textId);

str = obj.value;

str = str.replace(/[^/x00-/xff]/g, "**");

realLen = str.length;

if (realLen > len) {

alert("[" + msg + "]" + "長(zhǎng)度最大為" + len + "位," + "請(qǐng)重新輸入！/n注意：一個(gè)漢字占2位。");

obj.focus();

return false;

} else

return true;

}

/**

* 判斷某個(gè)文本框不可以為空.

* @param {文本框id} textId

* @param {文本框描述內(nèi)容} msg

* @return {有錯(cuò)就返回false,否則返回true}

*/

function checkIfEmpty(textId, msg) {

var textObj = $(textId);

var textValue = textObj.value;

if (trim(textValue) == '') {

alert('[' + msg + ']不得為空！');

textObj.focus();

return false;

} else {

return true;

}

}

/**

* 判斷指定文本框內(nèi)容必須為郵件.

* @param {文本框id} textId

* @param {文本框描述} msg

* @return {如果是郵件內(nèi)容就返回true否則返回false}

*/

function checkIsMail(textId, msg) {

var obj = $(textId);

if (!_isEmail(obj.value)) {

alert('[' + msg + ']不是合法的郵件地址！');

obj.focus();

return false;

} else

return true;

}

/**

* 驗(yàn)證是不是郵件.

* @param {要驗(yàn)證的字符串} strEmail

* @return {Boolean}

*/

function _isEmail(strEmail) {

//接下來(lái)的驗(yàn)證是否有兩個(gè)以上的‘.'號(hào)，有的話就是錯(cuò)的！

var first = strEmail.indexOf('.');

if (strEmail.indexOf('@')== -1) {

return false;

}

var tempStr = strEmail.substring(first + 1);

if (tempStr.indexOf('.') != -1) {

return false;

}

if (strEmail

.search(/^/w+((-/w+)|(/./w+))*/@[A-Za-z0-9]+((/.|-)[A-Za-z0-9]+)*/.[A-Za-z0-9]+$/) != -1) {

return true;

} else

return false;

}

/**

* 判斷某個(gè)文本框是否數(shù)字.

* @param {文本框id} textId

* @param {文本框描述內(nèi)容} msg

* @return {Boolean}

*/

function checkIsNum(textId, msg) {

obj = $(textId);

if (isNaN(obj.value)) {

alert('[' + msg + ']必須為數(shù)字。');

obj.focus();

return false;

} else

return true;

}

/**

* 判斷某個(gè)文本框是否含有非法字符.

* @param {文本框的id} textId

* @param {文本框描述內(nèi)容} msg

* @return {有錯(cuò)就返回false否則返回true}

*/

function checkIsValid(textId, msg) {

obj = $(textId);

if (!_isValidString(obj.value, '[' + msg + ']不得含有非法字符。')) {

obj.focus();

return false;

}

return true;

}

/**

* 判斷是不是合法字符串.

* @param {要進(jìn)行判斷的字符串} szStr

* @param {文本描述} errMsg

* @return {合法則返回true否則返回false}

*/

function _isValidString(szStr,errMsg) {

voidChar = "'/"><`~!@#$%^&/(/)（）！￥……？?“”‘'*";

for (var i = 0; i < voidChar.length; i++) {

aChar = voidChar.substring(i, i + 1);

if (szStr.indexOf(aChar) > -1){

alert(errMsg)

return false;

}

}

return true;

}

/*************** 以下方法和下拉菜單相關(guān)*************************************************/

/**

* 控制下拉菜單不可以為-1(未選擇情況value=-1)

* @param {下拉菜單id} selectId

* @param {下拉菜單描述內(nèi)容} msg

* @param {下拉菜單的空值對(duì)應(yīng)的value,默認(rèn)為-1} nullValue

* @return {Boolean}

*/

function checkChooseSelect(selectId, msg ,nullValue) {

var obj = $(selectId);

if (obj.value == notNull(nullValue,'-1')) {

alert('[' + msg + ']必選!');

obj.focus();

return false;

} else

return true;

}

/**

* 得到下拉菜單的顯示的文字.

* @param {下拉菜單dom對(duì)象} selectObj

* @return {返回下拉菜單的顯示的"文本"}

*/

function getSelectText(selectObj) {

return selectObj.options[selectObj.selectedIndex].text;

}

/**

* 得到下拉菜單的顯示的值.

* @param {下拉菜單dom對(duì)象} selectObj

* @return {得到下拉菜單的顯示的"值"}

*/

function getSelectValue(selectObj) {

return selectObj.options[selectObj.selectedIndex].value;

}

/**

* 設(shè)置下拉菜單的選擇狀態(tài)到指定的值.

* @param {下拉菜單對(duì)象} obj

* @param {要選擇的值} value

*/

function setSelectValue(obj, value) {

/*for (i = obj.options.length - 1; i >= 0; i--) {

if (obj.options[i].value == value) {

obj.options[i].selected = true;

return;

}

}

*/

obj.value= value;

}

/**

* 根據(jù)鍵值串的內(nèi)容進(jìn)行下拉菜單的動(dòng)態(tài)組裝

* @param {要進(jìn)行下拉菜單組裝的dom對(duì)象} obj

* @param {鍵值對(duì)用,和;分割,例如'1,男;2,女;3,未知'} valAndText

*/

function setSelectContent(obj,valAndText){

if(trim(valAndText)==''){

alert('沒(méi)有要進(jìn)行組裝下拉菜單的數(shù)據(jù)!');

return false;

}

clearSelect(obj);

var keyandvalues = valAndText.split(';');

for(var i=0;i<keyandvalues.length;i++){

var arr = keyandvalues[i].split(',');

if(arr){

var value =arr[0];

var text =arr[1];

var objOption = new Option(text,value);

obj.add(objOption);

}

}

}

/**

* 清空下拉菜單里面的內(nèi)容.

* @param {下拉菜單對(duì)象} obj

*/

function clearSelect(obj) {

for (var i=obj.options.length; i >0; i--) {

obj.remove(0);

}

}

/*************** 以下方法和多選框相關(guān)*************************************************/

/**

* 返回選中的checks的id組成的字符串,逗號(hào)隔開(kāi).

* @param {checks數(shù)組} checks

* @return 選擇的id組成的字符串

*/

function getCheckedIds(checks){

var selectedValue = '';

var len = checks.length;

for(var index=0; index<len; index++) {

if(checks[index].checked==true) {

selectedValue += checks[index].value+",";

}

}

if(selectedValue.length>0)

return selectedValue.substring(0,selectedValue.length-1);

return selectedValue;

}

下面的代碼放到html標(biāo)簽里，并在head里調(diào)用上面的js：

<HEAD>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />



</HEAD>

<SCRIPT LANGUAGE="JavaScript">



</SCRIPT>

<BODY>

<table>

<tr>

<td> 非空:

<input id='a'></td>

<td> checkIfEmpty('a','非空校驗(yàn)') </td>

</tr>

<tr>

<td> 郵箱:

<input id='b' value='[email protected]'></td>

<td> checkIsMail('b','郵箱校驗(yàn)') </td>

</tr>

<tr>

<td> 數(shù)字:

<input id='c' value='aaaa'></td>

<td> checkIsNum('c','數(shù)字校驗(yàn)') </td>

</tr>

<tr>

<td> 合法字符:

<input id='d' value='@$@$#$#!%%#'></td>

<td> checkIsValid('d','合法性校驗(yàn)') </td>

</tr>

<tr>

<td> 小的日期:

<input id='e' value='2010-1-1'>

大的日期:

<input id='f' value='2011-1-1'></td>

<td> compareTwoDate('e','f','小日期與大日期關(guān)系錯(cuò)誤!') </td>

</tr>

<tr>

<td> 小的數(shù):

<input id='k' value='12.3'>

大的數(shù):

<input id='l' value='4564'></td>

<td> compareTwoNum('k','l','大小數(shù)目關(guān)系不正確!') </td>

</tr>

<tr>

<td> 字符長(zhǎng)度校驗(yàn)(<5):

<input id='g'></td>

<td> checkLength('g',5,'長(zhǎng)度校驗(yàn)') </td>

</tr>

<tr>

<td> 下拉菜單非空校驗(yàn):

<select id='h'>

<option value='-1'> 請(qǐng)選擇 </option>

<option value='1'> 立項(xiàng) </option>

<option value='2'> 可研 </option>

</select></td>

<td> checkChooseSelect('h','下拉菜單非空','-1') </td>

</tr>

<tr>

<td colspan='2'><button onclick='check()'> 測(cè)試表單校驗(yàn)方法 </button></td>

</tr>

<tr>

<td><button onclick='getSelect()'> 得到下拉菜單的值 </button></td>

<td> getSelectText(sss)和getSelectValue(sss) </td>

</tr>

<tr>

<td> 輸入下拉菜單的鍵值字符串(如右所示)

<input id='i' value='1,男;2,女;3,未知'>

<button onclick='setSelect()'> 設(shè)置下拉菜單的值 </button></td>

<td> setSelectContent($('h'),sss) </td>

</tr>

<tr>

<td><input type='checkbox' name='j' value='aaa1'>

<input type='checkbox' name='j' value='aaa2'>

<input type='checkbox' name='j' value='aaa3'>

<input type='checkbox' name='j' value='aaa4'>

<button onclick='getMulti()'> 得到多選選擇的id </button></td>

<td> getCheckedIds(document.getElementsByName('j')) </td>

</tr>

</table>

</BODY>