js基础知识

主要知识点:js数组,数字函数,字符串函数,表单验证,hashMap,堆栈,日期函数,call函数 等。
next:js正则表达式,闭包,apply,callee,事件相关函数,Cookie等

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='[email protected]'>  
                                </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>  

你可能感兴趣的:(JavaScript,json,正则表达式,浏览器,F#)