js數組，數字函數，字符串函數，表單驗證，hashMap，堆棧，日期函數，call函數

1.javascript的數組API

Js代碼  收藏代碼
//定義數組  
        var pageIds = new Array();  
        pageIds.push('A');  
  
        數組長度  
        pageIds.length;  
  
//shift：刪除原數組第一項，並返回刪除元素的值；若是數組爲空則返回undefined   
var a = [1,2,3,4,5];   
var b = a.shift(); //a：[2,3,4,5]   b：1   
  
//unshift：將參數添加到原數組開頭，並返回數組的長度   
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下測試返回值總爲undefined，FF2.0下測試返回值爲7，因此這個方法的返回值不可靠，須要用返回值時可用splice代替本方法來使用。   
  
//pop：刪除原數組最後一項，並返回刪除元素的值；若是數組爲空則返回undefined   
var a = [1,2,3,4,5];   
var b = a.pop(); //a：[1,2,3,4]   b：5   
  
//push：將參數添加到原數組末尾，並返回數組的長度   
var a = [1,2,3,4,5];   
var b = a.push(6,7); //a：[1,2,3,4,5,6,7]   b：7   
  
//concat：返回一個新數組，是將參數添加到原數組中構成的   
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位置開始刪除deleteCount項，並從該位置起插入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：將數組反序   
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)：按指定的參數對數組進行排序   
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)：返回從原數組中指定開始下標到結束下標之間的項組成的新數組   
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)：將數組的元素組起一個字符串，以separator爲分隔符，省略的話則用默認用逗號爲分隔符   
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

Js代碼  收藏代碼
document方法：   
getElementById(id) Node 返回指定結點的引用   
getElementsByTagName(name) NodeList 返回文檔中全部匹配的元素的集合   
createElement(name) Node Node   
createTextNode(text) Node 建立一個純文本結點   
ownerDocument Document 指向這個節點所屬的文檔   
documentElement Node 返回html節點   
document.body Node 返回body節點   
  
element方法：   
getAttribute(attributeName) String 返回指定屬性的值   
setAttribute(attributeName,value) String 給屬性賦值   
removeAttribute(attributeName) String 移除指定屬性和它的值   
getElementsByTagName(name) NodeList 返回結點內全部匹配的元素的集合   
  
node方法：   
appendChild(child) Node 給指定結點添加一個新的子結點   
removeChild(child) Node 移除指定結點的子結點   
replaceChild(newChild,oldChild) Node 替換指定結點的子結點   
insertBefore(newChild,refChild) Node 在同一層級的結點前面插入新結點   
hasChildNodes() Boolean 若是結點有子結點則返回true   
  
node屬性：   
nodeName String 以字符串的格式存放結點的名稱   
nodeType String 以整型數據格式存放結點的類型   
nodeValue String 以可用的格式存放結點的值   
parentNode Node 指向結點的父結點的引用   
childNodes NodeList 指向子結點的引用的集合   
firstChild Node 指向子結點結合中的第一個子結點的引用   
lastChild Node 指向子結點結合中的最後一個子結點的引用   
previousSibling Node 指向前一個兄弟節點；若是這個節點就是兄弟節點，那麼該值爲null   
nextSibling Node 指向後一個兄弟節點；若是這個節點就是兄弟節點，那麼該值爲null   
 

3.網上搜藏的一個map對象:

Js代碼  收藏代碼
function HashMap()     
 {     
     /** Map 大小 **/    
     var size = 0;     
     /** 對象 **/    
     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"));   
 */    
      
 /** 同時也能夠把對象做爲 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]);   
 }   
 */    
 /** 把對象作爲Key時 ，自動調用了該對象的 toString() 方法 其實最終仍是以String對象爲Key**/    
      
 /** 若是是自定義對象 那本身得重寫 toString() 方法 不然 . 就是下面的結果 **/    
      
 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());     
      
 /** 運行結果 小名 小名 size = 1 **/    
      
 /** 若是改爲複寫toString()方法的對象 , 效果就徹底不同了 **/    
      
 </script>    
 

4.經常使用的數字函數:

Js代碼  收藏代碼
·數字型(Number)   
  1.聲明   
    var i = 1;   
    var i = new Number(1);   
  
  2.字符串與數字間的轉換   
    var i = 1;   
    var str = i.toString();     //結果: "1"   
    var str = new String(i);    //結果: "1"   
    i = parseInt(str);          //結果: 1   
    i = parseFloat(str);        //結果: 1.0   
      
    //注意: parseInt,parseFloat會把一個相似於"32G"的字符串,強制轉換成32   
  
  3.判斷是否爲有效的數字   
    var i = 123;  var str = "string";   
    if( typeof i == "number" ){ }   //true   
      
    //某些方法(如:parseInt,parseFloat)會返回一個特殊的值NaN(Not a Number)   
    //請注意第2點中的[注意],此方法不徹底適合判斷一個字符串是不是數字型!!   
    i = parseInt(str);   
    if( isNaN(i) ){ }   
      
  4.數字型比較   
    //此知識與[字符串比較]相同   
  
  5.小數轉整數   
    var f = 1.5;   
    var i = Math.round(f);  //結果:2 (四捨五入)   
    var i = Math.ceil(f);   //結果:2 (返回大於f的最小整數)   
    var i = Math.floor(f);  //結果:1 (返回小於f的最大整數)   
  
  6.格式化顯示數字   
    var i = 3.14159;   
      
    //格式化爲兩位小數的浮點數   
    var str = i.toFixed(2);     //結果: "3.14"   
      
    //格式化爲五位數字的浮點數(從左到右五位數字,不夠補零)   
    var str = i.toPrecision(5); //結果: "3.1415"   
  
  7.X進制數字的轉換   
    //不是很懂 -.-   
    var i = parseInt("0x1f",16);   
    var i = parseInt(i,10);   
    var i = parseInt("11010011",2);   
  
  8.隨機數   
    //返回0-1之間的任意小數   
    var rnd = Math.random();   
    //返回0-n之間的任意整數(不包括n)      
    var rnd = Math.floor(Math.random() * n)   
 

5.網上搜藏的js堆棧:

Js代碼  收藏代碼
function stack(){  
      if(this.top==undefined){  
      //初始化堆棧的頂部指針和數據存放域  
            this.top=0;  
            this.unit=new Array();  
      }  
      this.push=function(pushvalue){  
      //定義壓入堆棧的方法              
            this.unit[this.top]=pushvalue;  
            this.top+=1;              
      }  
      this.readAllElements=function(){  
      //定義讀取全部數據的方法  
            if(this.top==0){  
                  alert("當前棧空，沒法讀取數據");  
                  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("當前棧空，沒法彈出數據");  
                  return("");  
            }  
            var      popTo=this.unit[this.top-1];  
            this.top--;  
            return(popTo);  
            /* 從堆棧彈出數據，頂部指針減一，不過這裏沒有作到資源的釋放，也 
            就是說數據仍然存在於this.unit的數組中，只不過沒法訪問罷了。目前 
            我也沒想到好的辦法解決。*/  
      }  
}  
 

6.最經常使用的JavaScript日期函數:

Js代碼  收藏代碼
·日期型(Date)   
  1.聲明   
    var myDate = new Date();    //系統當前時間    
    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.獲取時間的某部份   
    var myDate = new Date();   
    myDate.getYear();       //獲取當前年份(2位)   
    myDate.getFullYear();   //獲取完整的年份(4位,1970-????)   
    myDate.getMonth();      //獲取當前月份(0-11,0表明1月)   
    myDate.getDate();       //獲取當前日(1-31)   
    myDate.getDay();        //獲取當前星期X(0-6,0表明星期天)     
    myDate.getTime();       //獲取當前時間(從1970.1.1開始的毫秒數)   時間戳！！  
    myDate.getHours();      //獲取當前小時數(0-23)   
    myDate.getMinutes();    //獲取當前分鐘數(0-59)   
    myDate.getSeconds();    //獲取當前秒數(0-59)   
    myDate.getMilliseconds();   //獲取當前毫秒數(0-999)   
    myDate.toLocaleDateString();    //獲取當前日期   
    myDate.toLocaleTimeString();    //獲取當前時間   
    myDate.toLocaleString( );       //獲取日期與時間   
  
  3.計算以前或將來的時間   
    var myDate = new Date();   
    myDate.setDate(myDate.getDate() + 10);  //當前時間加10天   
    //相似的方法都基本相同,以set開頭,具體參考第2點   
  
  4.計算兩個日期的偏移量   
    var i = daysBetween(beginDate,endDate); //返回天數   
    var i = beginDate.getTimezoneOffset(endDate); //返回分鐘數   
  
  5.檢查有效日期   
    //checkDate() 只容許"mm-dd-yyyy"或"mm/dd/yyyy"兩種格式的日期   
    if( checkDate("2006-01-01") ){ }   
      
    //正則表達式(本身寫的檢查 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.最經常使用字符串函數API:

Js代碼  收藏代碼
·字符串(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 位開始的字符   
    var myString = "Every good boy does fine.";   
    var section = myString.substring(6);    //結果: "good boy does fine."   
      
    //截取第 0 位開始至第 10 位爲止的字符   
    var myString = "Every good boy does fine.";   
    var section = myString.substring(0,10); //結果: "Every good"   
      
    //截取從第 11 位到倒數第 6 位爲止的字符   
    var myString = "Every good boy does fine.";   
    var section = myString.slice(11,-6);    //結果: "boy does"   
      
    //從第 6 位開始截取長度爲 4 的字符   
    var myString = "Every good boy does fine.";   
    var section = myString.substr(6,4);     //結果: "good"   
  
  4.轉換大小寫   
    var myString = "Hello";   
    var lcString = myString.toLowerCase();  //結果: "hello"   
    var ucString = myString.toUpperCase();  //結果: "HELLO"   
  
  5.字符串比較   
    var aString = "Hello!";   
    var bString = new String("Hello!");   
    if( aString == "Hello!" ){ }    //結果: true   
    if( aString == bString ){ }     //結果: true   
    if( aString === bString ){ }    //結果: false (兩個對象不一樣,儘管它們的值相同)   
  
  6.檢索字符串   
    var myString = "hello everybody.";   
    // 若是檢索不到會返回-1,檢索到的話返回在該串中的起始位置   
    if( myString.indexOf("every") > -1 ){ } //結果: true   
  
  7.查找替換字符串   
    var myString = "I is your father.";   
    var result = myString.replace("is","am");   //結果: "I am your father."   
  
  8.特殊字符:   
    \b : 後退符         \t : 水平製表符   
    \n : 換行符         \v : 垂直製表符   
    \f : 分頁符         \r : 回車符   
    \" : 雙引號         \' : 單引號   
    \\ : 反斜杆   
  
  9.將字符轉換成Unicode編碼   
    var myString = "hello";   
    var code = myString.charCodeAt(3);  //返回"l"的Unicode編碼(整型)   
    var char = String.fromCharCode(66); //返回Unicode爲66的字符   
  
  10.將字符串轉換成URL編碼   
    var myString = "hello all";   
    var code = encodeURI(myString);     //結果: "hello%20all"   
    var str = decodeURI(code);          //結果: "hello all"   
    //相應的還有:  encodeURIComponent()  decodeURIComponent()   
 

8.數學函數:

Js代碼  收藏代碼
·Math對象   
  1. Math.abs(num) : 返回num的絕對值   
  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的最小整數   
  7. Math.cos(num) : 返回num的餘弦值   
  8. Math.exp(x) : 返回以天然數爲底,x次冪的數   
  9. Math.floor(num) : 返回小於num的最大整數   
  10.Math.log(num) : 返回num的天然對數   
  11.Math.max(num1,num2) : 返回num1和num2中較大的一個   
  12.Math.min(num1,num2) : 返回num1和num2中較小的一個   
  13.Math.pow(x,y) : 返回x的y次方的值   
  14.Math.random() : 返回0到1之間的一個隨機數   
  15.Math.round(num) : 返回num四捨五入後的值   
  16.Math.sin(num) : 返回num的正弦值   
  17.Math.sqrt(num) : 返回num的平方根   
  18.Math.tan(num) : 返回num的正切值   
  19.Math.E : 天然數(2.718281828459045)   
  20.Math.LN2 : 2的天然對數(0.6931471805599453)   
  21.Math.LN10 : 10的天然對數(2.302585092994046)   
  22.Math.LOG2E : log 2 爲底的天然數(1.4426950408889634)   
  23.Math.LOG10E : log 10 爲底的天然數(0.4342944819032518)   
  24.Math.PI : π(3.141592653589793)   
  25.Math.SQRT1_2 : 1/2的平方根(0.7071067811865476)   
  26.Math.SQRT2 : 2的平方根(1.4142135623730951)   
 

9.瀏覽器特徵函數:

Js代碼  收藏代碼
1.瀏覽器名稱   
   //IE : "Microsoft Internet Explorer"   
   //NS : "Netscape"   
   var browserName = navigator.appName;   
  
 2.瀏覽器版本   
   bar browserVersion = navigator.appVersion;   
  
 3.客戶端操做系統   
   var isWin = ( navigator.userAgent.indexOf("Win") != -1 );   
   var isMac = ( navigator.userAgent.indexOf("Mac") != -1 );   
   var isUnix = ( navigator.userAgent.indexOf("X11") != -1 );   
  
 4.判斷是否支持某對象,方法,屬性   
   //當一個對象,方法,屬性未定義時會返回undefined或null等,這些特殊值都是false   
   if( document.images ){ }   
   if( document.getElementById ){ }   
  
 5.檢查瀏覽器當前語言   
   if( navigator.userLanguage ){ var l = navigator.userLanguage.toUpperCase(); }   
  
 6.檢查瀏覽器是否支持Cookies   
   if( navigator.cookieEnabled ){ }   
 

10.JavaScript面向對象的方法實現繼承:call方法

Js代碼  收藏代碼
// 動物類 animal  
function animal(bSex){  
    this.sex = bSex  
    this.getSex = function(){  
        return this.sex  
    }  
}  
// 類靜態變量 (若是你不修改它的話～～)  
animal.SEX_G = new Object();    // 雌性  
animal.SEX_B = new Object();    // 雄性  
// 動物子類 鳥  
function bird(bSex){  
    animal.call(this, bSex);  
    this.fly = function(iSpeed){  
        alert("飛行時速高達 " + iSpeed);  
    }  
}  
// 動物子類 魚  
function fish(bSex){  
    animal.call(this, bSex);  
    this.swim = function(iSpeed){  
        alert("遊動時速高達 " + iSpeed)  
    }  
}  
// 魚 鳥 雜交品種。。。  
function crossBF(bSex){  
    bird.call(this, bSex);  
    fish.call(this, bSex);  
}  
var oPet = new crossBF(animal.SEX_G);    // 雌性 魚鳥  
    alert(oPet.getSex() == animal.SEX_G ? "雌性" : "雄性");  
    oPet.fly(124)  
    oPet.swim(254)  
 

11.用面向對象的編程方式寫JavaScript:

Js代碼  收藏代碼
MyTool = new function(){  
        /** 
         * 返回非空字符串,若是有默認值就返回默認字符串. 
         */  
        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方法,包括表單校驗的一些方法,下拉菜單經常使用的方法等等:

Js代碼  收藏代碼
/** 
 * 對JSON對象轉換爲字符串. 
 * @param {json對象} 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字符串轉換爲json對象. 
 * @param {json字符串} jsonstr 
 * @return {json對象} 
 */  
function jsonStr2Obj(jsonstr) {  
         return eval("("+jsonstr+")");  
}  
  
/** 
 * 獲得一個元素的left座標值. 
 * @param {dom對象} obj 
 * @return {位置值} 
 */  
function getLeft(obj){   
        var offset=e.offsetLeft;   
        if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);   
        return offset;   
}   
  
/** 
 * 獲得一個元素的絕對位置的top座標值. 
 * @param {dom對象} obj 
 * @return {位置值} 
 */  
function getTop(obj){   
        var offset=e.offsetTop;   
        if(e.offsetParent!=null) offset+=getTop(e.offsetParent);   
        return offset;   
}   
  
/** 
 * 刪除一個字符串的左右空格. 
 * @param {原始字符串} str 
 * @return {刪除空格以後的字符串} 
 */  
function  trim(str)  
{    
   return  str.replace(/(^\s*)|(\s*$)/g,"");    
}  
  
/** 
 * 根據id取出一個元素. 
 * @param {元素id值} str 
 * @return {dom對象} 
 */  
function $(str) {  
        return document.getElementById(str);  
}  
  
/** 
 * 按name獲取一個對象. 
 * @param {元素name值} str 
 * @return {根據name返回的第一個對象} 
 */  
function $byName(str) {  
        var arr = document.getElementsByName(str);  
        if (arr)  
                return arr[0];  
        else  
                return null;  
}  
  
/***************如下方法和表單驗證相關*************************************************/  
/** 
 * 返回非空字符串,若是有默認值就返回默認字符串. 
 * @param {要進行轉換的原字符串} str 
 * @param {默認值} defaultStr 
 * @return {返回結果} 
 */  
function notNull(str, defaultStr) {  
        if (typeof(str) == "undefined" || str == null || str == '') {  
                if (defaultStr)  
                        return defaultStr;  
                else  
                        return '';  
        } else {  
                return str;  
        }  
}    
  
/** 
 * 比較兩個日期大小. 
 * @param {較小日期的文本框id} smallDate 
 * @param {較大日期的文本框id} bigDate 
 * @param {出錯的提示信息} 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;  
}  
  
/** 
 * 比較兩個金額大小的方法. 
 * @param {較小的金額} smallNum 
 * @param {較大的金額} bigNum 
 * @param {出錯提示信息} 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;  
}  
  
/** 
 * 檢查文本框的長度是否超出指定長度. 
 * @param {文本id} textId 
 * @param {文本框的最大長度} len 
 * @param {文本框描述內容} msg 
 * @return {有錯就返回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 + "]" + "長度最大爲" + len + "位," + "請從新輸入！\n注意：一個漢字佔2位。");  
                obj.focus();  
                return false;  
        } else  
                return true;  
}  
  
/** 
 * 判斷某個文本框不能夠爲空. 
 * @param {文本框id} textId 
 * @param {文本框描述內容} msg 
 * @return {有錯就返回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;  
        }  
}  
  
/** 
 * 判斷指定文本框內容必須爲郵件. 
 * @param {文本框id} textId 
 * @param {文本框描述} msg 
 * @return {若是是郵件內容就返回true不然返回false} 
 */  
function checkIsMail(textId, msg) {  
        var obj = $(textId);  
        if (!_isEmail(obj.value)) {  
                alert('[' + msg + ']不是合法的郵件地址！');  
                obj.focus();  
                return false;  
        } else  
                return true;  
}  
  
/** 
 * 驗證是否是郵件. 
 * @param {要驗證的字符串} strEmail 
 * @return {Boolean} 
 */  
function _isEmail(strEmail) {  
        //接下來的驗證是否有兩個以上的‘.’號，有的話就是錯的！  
        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;  
}  
  
/** 
 * 判斷某個文本框是否數字. 
 * @param {文本框id} textId 
 * @param {文本框描述內容} msg 
 * @return {Boolean} 
 */  
function checkIsNum(textId, msg) {  
        obj = $(textId);  
        if (isNaN(obj.value)) {  
                alert('[' + msg + ']必須爲數字。');  
                obj.focus();  
                return false;  
        } else  
                return true;  
}  
  
/** 
 * 判斷某個文本框是否含有非法字符. 
 * @param {文本框的id} textId 
 * @param {文本框描述內容} msg 
 * @return {有錯就返回false不然返回true} 
 */  
function checkIsValid(textId, msg) {  
        obj = $(textId);  
        if (!_isValidString(obj.value, '[' + msg + ']不得含有非法字符。')) {  
                obj.focus();  
                return false;  
        }  
        return true;  
}  
  
/** 
 * 判斷是否是合法字符串. 
 * @param {要進行判斷的字符串} 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;  
}   
  
/*************** 如下方法和下拉菜單相關*************************************************/  
/** 
 * 控制下拉菜單不能夠爲-1(未選擇狀況value=-1) 
 * @param {下拉菜單id} selectId 
 * @param {下拉菜單描述內容} msg 
 * @param {下拉菜單的空值對應的value,默認爲-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對象} selectObj 
 * @return {返回下拉菜單的顯示的"文本"} 
 */  
function getSelectText(selectObj) {  
       return selectObj.options[selectObj.selectedIndex].text;  
}  
  
/** 
 * 獲得下拉菜單的顯示的值. 
 * @param {下拉菜單dom對象} selectObj 
 * @return {獲得下拉菜單的顯示的"值"} 
 */  
function getSelectValue(selectObj) {  
        return selectObj.options[selectObj.selectedIndex].value;  
}  
  
/** 
 * 設置下拉菜單的選擇狀態到指定的值. 
 * @param {下拉菜單對象} 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;  
}  
  
/** 
 * 根據鍵值串的內容進行下拉菜單的動態組裝 
 * @param {要進行下拉菜單組裝的dom對象} obj 
 * @param {鍵值對用,和;分割,例如'1,男;2,女;3,未知'} valAndText 
 */  
function setSelectContent(obj,valAndText){  
        if(trim(valAndText)==''){  
                alert('沒有要進行組裝下拉菜單的數據!');  
                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);  
                }  
        }  
}  
  
/** 
 * 清空下拉菜單裏面的內容. 
 * @param {下拉菜單對象} obj 
 */  
function clearSelect(obj) {   
    for (var i=obj.options.length; i >0; i--) {  
        obj.remove(0);   
    }          
}   
  
/*************** 如下方法和多選框相關*************************************************/  
/** 
 * 返回選中的checks的id組成的字符串,逗號隔開. 
 * @param {checks數組} 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;  
}  
 將上面的js保存以後,使用下面的html進行測試:

Html代碼  收藏代碼
<HTML>  
        <HEAD>  
                <script language="javascript" src="aaaaa.js"></script>  
        </HEAD>  
        <SCRIPT LANGUAGE="JavaScript">  
<!--  
/**  
 * 表單驗證的示例js方法.  
 */  
function check(){  
        if(checkIfEmpty('a','非空校驗')  
                &&checkIsMail('b','郵箱校驗')  
                &&checkIsNum('c','數字校驗')  
                &&checkIsValid('d','合法性校驗')  
                &&compareTwoDate('e','f','小日期與大日期關係錯誤!')  
                &&checkLength('g',5,'長度校驗')  
                &&checkChooseSelect('h','下拉菜單非空','-1')  
                &&compareTwoNum('k','l','大小數目關係不正確!')){  
                alert('校驗經過!');  
                return true;          
        }else{  
                return false;  
        }  
}  
  
/**  
 * 取下拉菜單的值和文本的示例js方法.  
 */  
function getSelect(){  
        var sss = $('h');  
        alert('下拉菜單選擇的文本是:'+getSelectText(sss)+'\n'  
                        +'下拉菜單選擇的值是:'+getSelectValue(sss));  
}  
  
/**  
 * 根據鍵值字符串設置下拉菜單的顯示內容.  
 */  
function setSelect(){  
        var sss = $('i').value;  
        setSelectContent($('h'),sss);  
}  
  
/**  
 * 返回多選框數組選擇狀態的id的字符串,結果以逗號隔開.  
 */  
function getMulti(){   
        alert('多選選擇的id是:'+getCheckedIds(document.getElementsByName('j')));  
}  
//-->  
</SCRIPT>  
        <BODY>  
                <table>  
                        <tr>  
                                <td>  
                                        非空:  
                                        <input id='a'>  
                                </td>  
                                <td>  
                                        checkIfEmpty('a','非空校驗')  
                                </td>  
                        </tr>  
                        <tr>  
                                <td>  
                                        郵箱:  
                                        <input id='b' value='323232@2323.com'>  
                                </td>  
                                <td>  
                                        checkIsMail('b','郵箱校驗')  
                                </td>  
                        </tr>  
                        <tr>  
                                <td>  
                                        數字:  
                                        <input id='c' value='aaaa'>  
                                </td>  
                                <td>  
                                        checkIsNum('c','數字校驗')  
                                </td>  
                        </tr>  
                        <tr>  
                                <td>  
                                        合法字符:  
                                        <input id='d' value='@$@$#$#!%%#'>  
                                </td>  
                                <td>  
                                        checkIsValid('d','合法性校驗')  
                                </td>  
                        </tr>  
                        <tr>  
                                <td>  
                                        小的日期:  
                                        <input id='e' value='2010-1-1'>  
                                        大的日期:  
                                        <input id='f' value='2011-1-1'>  
                                </td>  
                                <td>  
                                        compareTwoDate('e','f','小日期與大日期關係錯誤!')  
                                </td>  
                        </tr>  
                        <tr>  
                                <td>  
                                        小的數:  
                                        <input id='k' value='12.3'>  
                                        大的數:  
                                        <input id='l' value='4564'>  
                                </td>  
                                <td>  
                                        compareTwoNum('k','l','大小數目關係不正確!')  
                                </td>  
                        </tr>  
                        <tr>  
                                <td>  
                                        字符長度校驗(<5):  
                                        <input id='g'>  
                                </td>  
                                <td>  
                                        checkLength('g',5,'長度校驗')  
                                </td>  
                        </tr>  
                        <tr>  
                                <td>  
                                        下拉菜單非空校驗:  
                                        <select id='h'>  
                                                <option value='-1'>  
                                                        請選擇  
                                                </option>  
                                                <option value='1'>  
                                                        立項  
                                                </option>  
                                                <option value='2'>  
                                                        可研  
                                                </option>  
                                        </select>  
                                </td>  
                                <td>  
                                        checkChooseSelect('h','下拉菜單非空','-1')  
                                </td>  
                        </tr>  
                        <tr>  
                                <td colspan='2'>  
                                        <button onclick='check()'>  
                                                測試表單校驗方法  
                                        </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()'>  
                                                設置下拉菜單的值  
                                        </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>  
</HTML>