1.javascript的数组API

01 //定义数组
02         var pageIds = new Array();
03         pageIds.push(´A´);
04  
05         数组长度
06         pageIds.length;
07  
08 //shift:删除原数组第一项,并返回删除元素的值;如果数组为空则返回undefined
09 var a = [1,2,3,4,5];
10 var b = a.shift(); //a:[2,3,4,5]   b:1
11  
12 //unshift:将参数添加到原数组开头,并返回数组的长度
13 var a = [1,2,3,4,5];
14 var b = a.unshift(-2,-1); //a:[-2,-1,1,2,3,4,5]   b:7
15 //注:在IE6.0下测试返回值总为undefined,FF2.0下测试返回值为7,所以这个方法的返回值不可靠,需要用返回值时可用splice代替本方法来使用。
16  
17 //pop:删除原数组最后一项,并返回删除元素的值;如果数组为空则返回undefined
18 var a = [1,2,3,4,5];
19 var b = a.pop(); //a:[1,2,3,4]   b:5
20  
21 //push:将参数添加到原数组末尾,并返回数组的长度
22 var a = [1,2,3,4,5];
23 var b = a.push(6,7); //a:[1,2,3,4,5,6,7]   b:7
24  
25 //concat:返回一个新数组,是将参数添加到原数组中构成的
26 var a = [1,2,3,4,5];
27 var b = a.concat(6,7); //a:[1,2,3,4,5]   b:[1,2,3,4,5,6,7]
28  
29 //splice(start,deleteCount,val1,val2,):从start位置开始删除deleteCount项,并从该位置起插入val1,val2,
30 var a = [1,2,3,4,5];
31 var b = a.splice(2,2,7,8,9); //a:[1,2,7,8,9,5]   b:[3,4]
32 var b = a.splice(0,1); //同shift
33 a.splice(0,0,-2,-1); var b = a.length; //同unshift
34 var b = a.splice(a.length-1,1); //同pop
35 a.splice(a.length,0,6,7); var b = a.length; //同push
36  
37 //reverse:将数组反序
38 var a = [1,2,3,4,5];
39 var b = a.reverse(); //a:[5,4,3,2,1]   b:[5,4,3,2,1]
40  
41 //sort(orderfunction):按指定的参数对数组进行排序
42 var a = [1,2,3,4,5];
43 var b = a.sort(); //a:[1,2,3,4,5]   b:[1,2,3,4,5]
44  
45 //slice(start,end):返回从原数组中指定开始下标到结束下标之间的项组成的新数组
46 var a = [1,2,3,4,5];
47 var b = a.slice(2,5); //a:[1,2,3,4,5]   b:[3,4,5]
48  
49 //join(separator):将数组的元素组起一个字符串,以separator为分隔符,省略的话则用默认用逗号为分隔符
50 var a = [1,2,3,4,5];
51 var b = a.join("¦"); //a:[1,2,3,4,5]   b:"1¦2¦3¦4¦5"

2.dom最常用API

01 document方法:
02 getElementById(id) Node 返回指定结点的引用
03 getElementsByTagName(name) NodeList 返回文档中所有匹配的元素的集合
04 createElement(name) Node Node
05 createTextNode(text) Node 创建一个纯文本结点
06 ownerDocument Document 指向这个节点所属的文档
07 documentElement Node 返回html节点
08 document.body Node 返回body节点
09  
10 element方法:
11 getAttribute(attributeName) String 返回指定属性的值
12 setAttribute(attributeName,value) String 给属性赋值
13 removeAttribute(attributeName) String 移除指定属性和它的值
14 getElementsByTagName(name) NodeList 返回结点内所有匹配的元素的集合
15  
16 node方法:
17 appendChild(child) Node 给指定结点添加一个新的子结点
18 removeChild(child) Node 移除指定结点的子结点
19 replaceChild(newChild,oldChild) Node 替换指定结点的子结点
20 insertBefore(newChild,refChild) Node 在同一层级的结点前面插入新结点
21 hasChildNodes() Boolean 如果结点有子结点则返回true
22  
23 node属性:
24 nodeName String 以字符串的格式存放结点的名称
25 nodeType String 以整型数据格式存放结点的类型
26 nodeValue String 以可用的格式存放结点的值
27 parentNode Node 指向结点的父结点的引用
28 childNodes NodeList 指向子结点的引用的集合
29 firstChild Node 指向子结点结合中的第一个子结点的引用
30 lastChild Node 指向子结点结合中的最后一个子结点的引用
31 previousSibling Node 指向前一个兄弟节点;如果这个节点就是兄弟节点,那么该值为null
32 nextSibling Node 指向后一个兄弟节点;如果这个节点就是兄弟节点,那么该值为null

3.网上搜藏的一个map对象:

001 function HashMap()
002  {
003      /** Map 大小 **/
004      var size = 0;
005      /** 对象 **/
006      var entry = new Object();  
007  
008      /** 存 **/
009      this.put = function (key , value)
010      {
011          if(!this.containsKey(key))
012          {
013              size ++ ;
014          }
015          entry[key] = value;
016      }  
017  
018      /** 取 **/
019      this.get = function (key)
020      {
021          return this.containsKey(key) ? entry[key] : null;
022      }  
023  
024      /** 删除 **/
025      this.remove = function ( key )
026      {
027          if( this.containsKey(key) && ( delete entry[key] ) )
028          {
029              size --;
030          }
031      }  
032  
033      /** 是否包含 Key **/
034      this.containsKey = function ( key )
035      {
036          return (key in entry);
037      }  
038  
039      /** 是否包含 Value **/
040      this.containsValue = function ( value )
041      {
042          for(var prop in entry)
043          {
044              if(entry[prop] == value)
045              {
046                  return true;
047              }
048          }
049          return false;
050      }  
051  
052      /** 所有 Value **/
053      this.values = function ()
054      {
055          var values = new Array();
056          for(var prop in entry)
057          {
058              values.push(entry[prop]);
059          }
060          return values;
061      }  
062  
063      /** 所有 Key **/
064      this.keys = function ()
065      {
066          var keys = new Array();
067          for(var prop in entry)
068          {
069              keys.push(prop);
070          }
071          return keys;
072      }  
073  
074      /** Map Size **/
075      this.size = function ()
076      {
077          return size;
078      }  
079  
080      /* 清空 */
081      this.clear = function ()
082      {
083          size = 0;
084          entry = new Object();
085      }
086  }  
087  
088  var map = new HashMap();  
089  
090  /*
091  map.put("A","1");
092  map.put("B","2");
093  map.put("A","5");
094  map.put("C","3");
095  map.put("A","4");
096  */
097  /*
098  alert(map.containsKey("XX"));
099  alert(map.size());
100  alert(map.get("A"));
101  alert(map.get("XX"));
102  map.remove("A");
103  alert(map.size());
104  alert(map.get("A"));
105  */ 
106  
107  /** 同时也可以把对象作为 Key **/
108  /*
109  var arrayKey = new Array("1","2","3","4");
110  var arrayValue = new Array("A","B","C","D");
111  map.put(arrayKey,arrayValue);
112  var value = map.get(arrayKey);
113  for(var i = 0 ; i < value.length ; i++)
114  {
115      //alert(value[i]);
116  }
117  */
118  /** 把对象做为Key时 ,自动调用了该对象的 toString() 方法 其实最终还是以String对象为Key**/ 
119  
120  /** 如果是自定义对象 那自己得重写 toString() 方法 否则 . 就是下面的结果 **/ 
121  
122  function MyObject(name)
123  {
124      this.name = name;
125  }  
126  
127  /**
128  function MyObject(name)
129  {
130      this.name = name; 
131  
132      this.toString = function ()
133      {
134          return this.name;
135      }
136  }
137  **/
138  var object1 = new MyObject("小张");
139  var object2 = new MyObject("小名");  
140  
141  map.put(object1,"小张");
142  map.put(object2,"小名");
143  alert(map.get(object1));
144  alert(map.get(object2));
145  map.remove("xxxxx");
146  alert(map.size());  
147  
148  /** 运行结果 小名 小名 size = 1 **/ 
149  
150  /** 如果改成复写toString()方法的对象 , 效果就完全不一样了 **/ 
151  
152  </script>

4.常用的数字函数:

01 ·数字型(Number)
02   1.声明
03     var i = 1;
04     var i = new Number(1);
05  
06   2.字符串与数字间的转换
07     var i = 1;
08     var str = i.toString();     //结果: "1"
09     var str = new String(i);    //结果: "1"
10     i = parseInt(str);          //结果: 1
11     i = parseFloat(str);        //结果: 1.0
12  
13     //注意: parseInt,parseFloat会把一个类似于"32G"的字符串,强制转换成32
14  
15   3.判断是否为有效的数字
16     var i = 123;  var str = "string";
17     if( typeof i == "number" ){ }   //true
18  
19     //某些方法(如:parseInt,parseFloat)会返回一个特殊的值NaN(Not a Number)
20     //请注意第2点中的[注意],此方法不完全适合判断一个字符串是否是数字型!!
21     i = parseInt(str);
22     if( isNaN(i) ){ }
23  
24   4.数字型比较
25     //此知识与[字符串比较]相同
26  
27   5.小数转整数
28     var f = 1.5;
29     var i = Math.round(f);  //结果:2 (四舍五入)
30     var i = Math.ceil(f);   //结果:2 (返回大于f的最小整数)
31     var i = Math.floor(f);  //结果:1 (返回小于f的最大整数)
32  
33   6.格式化显示数字
34     var i = 3.14159;
35  
36     //格式化为两位小数的浮点数
37     var str = i.toFixed(2);     //结果: "3.14"
38  
39     //格式化为五位数字的浮点数(从左到右五位数字,不够补零)
40     var str = i.toPrecision(5); //结果: "3.1415"
41  
42   7.X进制数字的转换
43     //不是很懂 -.-
44     var i = parseInt("0x1f",16);
45     var i = parseInt(i,10);
46     var i = parseInt("11010011",2);
47  
48   8.随机数
49     //返回0-1之间的任意小数
50     var rnd = Math.random();
51     //返回0-n之间的任意整数(不包括n)
52     var rnd = Math.floor(Math.random() * n)

5.网上搜藏的js堆栈:

01 function stack(){
02       if(this.top==undefined){
03       //初始化堆栈的顶部指针和数据存放域
04             this.top=0;
05             this.unit=new Array();
06       }
07       this.push=function(pushvalue){
08       //定义压入堆栈的方法
09             this.unit[this.top]=pushvalue;
10             this.top+=1;
11       }
12       this.readAllElements=function(){
13       //定义读取所有数据的方法
14             if(this.top==0){
15                   alert("当前栈空,无法读取数据");
16                   return("");
17             }
18             var count=0;
19             var outStr="";
20  
21             for(count=0;count<this.top;count++){
22                   outStr+=this.unit[count]+",";
23             }
24             return(outStr);
25       }
26       this.pop=function(){
27       //定义弹出堆栈的方法
28             if(this.top==0){
29                   alert("当前栈空,无法弹出数据");
30                   return("");
31             }
32             var      popTo=this.unit[this.top-1];
33             this.top--;
34             return(popTo);
35             /* 从堆栈弹出数据,顶部指针减一,不过这里没有做到资源的释放,也
36             就是说数据仍然存在于this.unit的数组中,只不过无法访问罢了。目前
37             我也没想到好的办法解决。*/
38       }
39 }

6.最常用的JavaScript日期函数:

01 ·日期型(Date)
02   1.声明
03     var myDate = new Date();    //系统当前时间
04     var myDate = new Date(yyyy, mm, dd, hh, mm, ss);
05     var myDate = new Date(yyyy, mm, dd);
06     var myDate = new Date("monthName dd, yyyy hh:mm:ss");
07     var myDate = new Date("monthName dd, yyyy");
08     var myDate = new Date(epochMilliseconds);
09  
10   2.获取时间的某部份
11     var myDate = new Date();
12     myDate.getYear();       //获取当前年份(2位)
13     myDate.getFullYear();   //获取完整的年份(4位,1970-????)
14     myDate.getMonth();      //获取当前月份(0-11,0代表1月)
15     myDate.getDate();       //获取当前日(1-31)
16     myDate.getDay();        //获取当前星期X(0-6,0代表星期天)
17     myDate.getTime();       //获取当前时间(从1970.1.1开始的毫秒数)   时间戳!!
18     myDate.getHours();      //获取当前小时数(0-23)
19     myDate.getMinutes();    //获取当前分钟数(0-59)
20     myDate.getSeconds();    //获取当前秒数(0-59)
21     myDate.getMilliseconds();   //获取当前毫秒数(0-999)
22     myDate.toLocaleDateString();    //获取当前日期
23     myDate.toLocaleTimeString();    //获取当前时间
24     myDate.toLocaleString( );       //获取日期与时间
25  
26   3.计算之前或未来的时间
27     var myDate = new Date();
28     myDate.setDate(myDate.getDate() + 10);  //当前时间加10天
29     //类似的方法都基本相同,以set开头,具体参考第2点
30  
31   4.计算两个日期的偏移量
32     var i = daysBetween(beginDate,endDate); //返回天数
33     var i = beginDate.getTimezoneOffset(endDate); //返回分钟数
34  
35   5.检查有效日期
36     //checkDate() 只允许"mm-dd-yyyy"或"mm/dd/yyyy"两种格式的日期
37     if( checkDate("2006-01-01") ){ }
38  
39     //正则表达式(自己写的检查 yyyy-mm-dd, yy-mm-dd, yyyy/mm/dd, yy/mm/dd 四种)
40     var r = /^(\d{2}¦\d{4})[\/-]\d{1,2}[\/-]\d{1,2}$/;
41     if( r.test( myString ) ){ }

7.最常用字符串函数API:

01 ·字符串(String)
02   1.声明
03     var myString = new String("Every good boy does fine.");
04     var myString = "Every good boy does fine.";
05  
06   2.字符串连接
07     var myString = "Every " + "good boy " + "does fine.";
08     var myString = "Every ";  myString += "good boy does fine.";
09  
10   3.截取字符串
11     //截取第 6 位开始的字符
12     var myString = "Every good boy does fine.";
13     var section = myString.substring(6);    //结果: "good boy does fine."
14  
15     //截取第 0 位开始至第 10 位为止的字符
16     var myString = "Every good boy does fine.";
17     var section = myString.substring(0,10); //结果: "Every good"
18  
19     //截取从第 11 位到倒数第 6 位为止的字符
20     var myString = "Every good boy does fine.";
21     var section = myString.slice(11,-6);    //结果: "boy does"
22  
23     //从第 6 位开始截取长度为 4 的字符
24     var myString = "Every good boy does fine.";
25     var section = myString.substr(6,4);     //结果: "good"
26  
27   4.转换大小写
28     var myString = "Hello";
29     var lcString = myString.toLowerCase();  //结果: "hello"
30     var ucString = myString.toUpperCase();  //结果: "HELLO"
31  
32   5.字符串比较
33     var aString = "Hello!";
34     var bString = new String("Hello!");
35     if( aString == "Hello!" ){ }    //结果: true
36     if( aString == bString ){ }     //结果: true
37     if( aString === bString ){ }    //结果: false (两个对象不同,尽管它们的值相同)
38  
39   6.检索字符串
40     var myString = "hello everybody.";
41     // 如果检索不到会返回-1,检索到的话返回在该串中的起始位置
42     if( myString.indexOf("every") > -1 ){ } //结果: true
43  
44   7.查找替换字符串
45     var myString = "I is your father.";
46     var result = myString.replace("is","am");   //结果: "I am your father."
47  
48   8.特殊字符:
49     \b : 后退符         \t : 水平制表符
50     \n : 换行符         \v : 垂直制表符
51     \f : 分页符         \r : 回车符
52     \" : 双引号         \´ : 单引号
53     \\ : 反斜杆
54  
55   9.将字符转换成Unicode编码
56     var myString = "hello";
57     var code = myString.charCodeAt(3);  //返回"l"的Unicode编码(整型)
58     var char = String.fromCharCode(66); //返回Unicode为66的字符
59  
60   10.将字符串转换成URL编码
61     var myString = "hello all";
62     var code = encodeURI(myString);     //结果: "hello%20all"
63     var str = decodeURI(code);          //结果: "hello all"
64     //相应的还有:  encodeURIComponent()  decodeURIComponent()

8.数学函数:

01 ·Math对象
02   1. Math.abs(num) : 返回num的绝对值
03   2. Math.acos(num) : 返回num的反余弦值
04   3. Math.asin(num) : 返回num的反正弦值
05   4. Math.atan(num) : 返回num的反正切值
06   5. Math.atan2(y,x) : 返回y除以x的商的反正切值
07   6. Math.ceil(num) : 返回大于num的最小整数
08   7. Math.cos(num) : 返回num的余弦值
09   8. Math.exp(x) : 返回以自然数为底,x次幂的数
10   9. Math.floor(num) : 返回小于num的最大整数
11   10.Math.log(num) : 返回num的自然对数
12   11.Math.max(num1,num2) : 返回num1和num2中较大的一个
13   12.Math.min(num1,num2) : 返回num1和num2中较小的一个
14   13.Math.pow(x,y) : 返回x的y次方的值
15   14.Math.random() : 返回0到1之间的一个随机数
16   15.Math.round(num) : 返回num四舍五入后的值
17   16.Math.sin(num) : 返回num的正弦值
18   17.Math.sqrt(num) : 返回num的平方根
19   18.Math.tan(num) : 返回num的正切值
20   19.Math.E : 自然数(2.718281828459045)
21   20.Math.LN2 : 2的自然对数(0.6931471805599453)
22   21.Math.LN10 : 10的自然对数(2.302585092994046)
23   22.Math.LOG2E : log 2 为底的自然数(1.4426950408889634)
24   23.Math.LOG10E : log 10 为底的自然数(0.4342944819032518)
25   24.Math.PI : π(3.141592653589793)
26   25.Math.SQRT1_2 : 1/2的平方根(0.7071067811865476)
27   26.Math.SQRT2 : 2的平方根(1.4142135623730951)

9.浏览器特征函数:

01 1.浏览器名称
02    //IE : "Microsoft Internet Explorer"
03    //NS : "Netscape"
04    var browserName = navigator.appName;
05  
06  2.浏览器版本
07    bar browserVersion = navigator.appVersion;
08  
09  3.客户端操作系统
10    var isWin = ( navigator.userAgent.indexOf("Win") != -1 );
11    var isMac = ( navigator.userAgent.indexOf("Mac") != -1 );
12    var isUnix = ( navigator.userAgent.indexOf("X11") != -1 );
13  
14  4.判断是否支持某对象,方法,属性
15    //当一个对象,方法,属性未定义时会返回undefined或null等,这些特殊值都是false
16    if( document.images ){ }
17    if( document.getElementById ){ }
18  
19  5.检查浏览器当前语言
20    if( navigator.userLanguage ){ var l = navigator.userLanguage.toUpperCase(); }
21  
22  6.检查浏览器是否支持Cookies
23    if( navigator.cookieEnabled ){ }

10.JavaScript面向对象的方法实现继承:call方法

01 // 动物类 animal
02 function animal(bSex){
03     this.sex = bSex
04     this.getSex = function(){
05         return this.sex
06     }
07 }
08 // 类静态变量 (如果你不修改它的话~~)
09 animal.SEX_G = new Object();    // 雌性
10 animal.SEX_B = new Object();    // 雄性
11 // 动物子类 鸟
12 function bird(bSex){
13     animal.call(this, bSex);
14     this.fly = function(iSpeed){
15         alert("飞行时速高达 " + iSpeed);
16     }
17 }
18 // 动物子类 鱼
19 function fish(bSex){
20     animal.call(this, bSex);
21     this.swim = function(iSpeed){
22         alert("游动时速高达 " + iSpeed)
23     }
24 }
25 // 鱼 鸟 杂交品种。。。
26 function crossBF(bSex){
27     bird.call(this, bSex);
28     fish.call(this, bSex);
29 }
30 var oPet = new crossBF(animal.SEX_G);    // 雌性 鱼鸟
31     alert(oPet.getSex() == animal.SEX_G ? "雌性" : "雄性");
32     oPet.fly(124)
33     oPet.swim(254)

11.用面向对象的编程方式写JavaScript:

01 MyTool = new function(){
02         /**
03          * 返回非空字符串,如果有默认值就返回默认字符串.
04          */
05         this.notNull = function(str,defaultStr){
06                 if(typeof(str)=="undefined"¦¦str==null¦¦str==´´){
07                         if(defaultStr)
08                                 return defaultStr;
09                         else
10                                 return ´´;
11                 }
12                 else{
13                         return str;
14                 }
15         }
16 }
17  
18 rootId = MyTool.notNull(rootId,´001000´);

12.常用的js方法,包括表单校验的一些方法,下拉菜单常用的方法等等:

001 /**
002  * 对JSON对象转换为字符串.
003  * @param {json对象} json
004  * @return {json字符串}
005  */
006 function jsonObj2Str(json) {
007         var str = "{";
008         for (prop in json) {
009                 str += prop + ":" + json[prop] + ",";
010         }
011         str = str.substr(0, str.length - 1);
012         str += "}";
013         return str;
014 }
015  
016 /**
017  * 将json字符串转换为json对象.
018  * @param {json字符串} jsonstr
019  * @return {json对象}
020  */
021 function jsonStr2Obj(jsonstr) {
022          return eval("("+jsonstr+")");
023 }
024  
025 /**
026  * 得到一个元素的left坐标值.
027  * @param {dom对象} obj
028  * @return {位置值}
029  */
030 function getLeft(obj){
031         var offset=e.offsetLeft;
032         if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
033         return offset;
034 }
035  
036 /**
037  * 得到一个元素的绝对位置的top坐标值.
038  * @param {dom对象} obj
039  * @return {位置值}
040  */
041 function getTop(obj){
042         var offset=e.offsetTop;
043         if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
044         return offset;
045 }
046  
047 /**
048  * 删除一个字符串的左右空格.
049  * @param {原始字符串} str
050  * @return {删除空格之后的字符串}
051  */
052 function  trim(str)
053 {
054    return  str.replace(/(^\s*)¦(\s*$)/g,"");
055 }
056  
057 /**
058  * 根据id取出一个元素.
059  * @param {元素id值} str
060  * @return {dom对象}
061  */
062 function $(str) {
063         return document.getElementById(str);
064 }
065  
066 /**
067  * 按name获取一个对象.
068  * @param {元素name值} str
069  * @return {根据name返回的第一个对象}
070  */
071 function $byName(str) {
072         var arr = document.getElementsByName(str);
073         if (arr)
074                 return arr[0];
075         else
076                 return null;
077 }
078  
079 /***************以下方法和表单验证相关*************************************************/
080 /**
081  * 返回非空字符串,如果有默认值就返回默认字符串.
082  * @param {要进行转换的原字符串} str
083  * @param {默认值} defaultStr
084  * @return {返回结果}
085  */
086 function notNull(str, defaultStr) {
087         if (typeof(str) == "undefined" ¦¦ str == null ¦¦ str == ´´) {
088                 if (defaultStr)
089                         return defaultStr;
090                 else
091                         return ´´;
092         } else {
093                 return str;
094         }
095
096  
097 /**
098  * 比较两个日期大小.
099  * @param {较小日期的文本框id} smallDate
100  * @param {较大日期的文本框id} bigDate
101  * @param {出错的提示信息} msg
102  */
103 function compareTwoDate(smallDate, bigDate, msg) {
104         var v1 = $(smallDate).value;
105         var v2 = $(bigDate).value;
106         if (v1 >= v2) {
107                 alert(msg);
108                                 v2.focus();
109                 return false;
110         }
111         return true;
112 }
113  
114 /**
115  * 比较两个金额大小的方法.
116  * @param {较小的金额} smallNum
117  * @param {较大的金额} bigNum
118  * @param {出错提示信息} msg
119  * @return {Boolean}
120  */
121 function compareTwoNum(smallNum, bigNum, msg) {
122         var v1 = $(smallNum).value;
123         var v2 = $(bigNum).value;
124         if (parseFloat(v1) >= parseFloat(v2)) {
125                 alert(msg);
126                                 v2.focus();
127                 return false;
128         }
129         return true;
130 }
131  
132 /**
133  * 检查文本框的长度是否超出指定长度.
134  * @param {文本id} textId
135  * @param {文本框的最大长度} len
136  * @param {文本框描述内容} msg
137  * @return {有错就返回false,否则返回true}
138  */
139 function checkLength(textId, len, msg) {
140         obj = $(textId);
141         str = obj.value;
142         str = str.replace(/[^\x00-\xff]/g, "**");
143         realLen = str.length;
144         if (realLen > len) {
145                 alert("[" + msg + "]" + "长度最大为" + len + "位," + "请重新输入!\n注意:一个汉字占2位。");
146                 obj.focus();
147                 return false;
148         } else
149                 return true;
150 }
151  
152 /**
153  * 判断某个文本框不可以为空.
154  * @param {文本框id} textId
155  * @param {文本框描述内容} msg
156  * @return {有错就返回false,否则返回true}
157  */
158 function checkIfEmpty(textId, msg) {
159         var textObj = $(textId);
160         var textValue = textObj.value;
161         if (trim(textValue) == ´´) {
162                 alert(´[´ + msg + ´]不得为空!´);
163                 textObj.focus();
164                 return false;
165         } else {
166                 return true;
167         }
168 }
169  
170 /**
171  * 判断指定文本框内容必须为邮件.
172  * @param {文本框id} textId
173  * @param {文本框描述} msg
174  * @return {如果是邮件内容就返回true否则返回false}
175  */
176 function checkIsMail(textId, msg) {
177         var obj = $(textId);
178         if (!_isEmail(obj.value)) {
179                 alert(´[´ + msg + ´]不是合法的邮件地址!´);
180                 obj.focus();
181                 return false;
182         } else
183                 return true;
184 }
185  
186 /**
187  * 验证是不是邮件.
188  * @param {要验证的字符串} strEmail
189  * @return {Boolean}
190  */
191 function _isEmail(strEmail) {
192         //接下来的验证是否有两个以上的‘.’号,有的话就是错的!
193         var first = strEmail.indexOf(´.´);
194         if (strEmail.indexOf(´@´)== -1) {
195                 return false;
196         }
197         var tempStr = strEmail.substring(first + 1);
198          if (tempStr.indexOf(´.´) != -1) {
199                 return false;
200         }
201         if (strEmail
202                         .search(/^\w+((-\w+)¦(\.\w+))*\@[A-Za-z0-9]+((\.¦-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) != -1) {
203                 return true;
204         } else
205                 return false;
206 }
207  
208 /**
209  * 判断某个文本框是否数字.
210  * @param {文本框id} textId
211  * @param {文本框描述内容} msg
212  * @return {Boolean}
213  */
214 function checkIsNum(textId, msg) {
215         obj = $(textId);
216         if (isNaN(obj.value)) {
217                 alert(´[´ + msg + ´]必须为数字。´);
218                 obj.focus();
219                 return false;
220         } else
221                 return true;
222 }
223  
224 /**
225  * 判断某个文本框是否含有非法字符.
226  * @param {文本框的id} textId
227  * @param {文本框描述内容} msg
228  * @return {有错就返回false否则返回true}
229  */
230 function checkIsValid(textId, msg) {
231         obj = $(textId);
232         if (!_isValidString(obj.value, ´[´ + msg + ´]不得含有非法字符。´)) {
233                 obj.focus();
234                 return false;
235         }
236         return true;
237 }
238  
239 /**
240  * 判断是不是合法字符串.
241  * @param {要进行判断的字符串} szStr
242  * @param {文本描述} errMsg
243  * @return {合法则返回true否则返回false}
244  */
245 function _isValidString(szStr,errMsg) {
246         voidChar = "´\"><`~!@#$%^&\(\)()!¥……??“”‘’*";
247         for (var i = 0; i < voidChar.length; i++) {
248                 aChar = voidChar.substring(i, i + 1);
249                 if (szStr.indexOf(aChar) > -1){
250                         alert(errMsg)
251                         return false;
252                 }
253         }
254         return true;
255 }
256  
257 /*************** 以下方法和下拉菜单相关*************************************************/
258 /**
259  * 控制下拉菜单不可以为-1(未选择情况value=-1)
260  * @param {下拉菜单id} selectId
261  * @param {下拉菜单描述内容} msg
262  * @param {下拉菜单的空值对应的value,默认为-1} nullValue
263  * @return {Boolean}
264  */
265 function checkChooseSelect(selectId, msg ,nullValue) {
266         var obj = $(selectId);
267         if (obj.value == notNull(nullValue,´-1´)) {
268                 alert(´[´ + msg + ´]必选!´);
269                 obj.focus();
270                 return false;
271         } else
272                 return true;
273 }
274  
275 /**
276  * 得到下拉菜单的显示的文字.
277  * @param {下拉菜单dom对象} selectObj
278  * @return {返回下拉菜单的显示的"文本"}
279  */
280 function getSelectText(selectObj) {
281        return selectObj.options[selectObj.selectedIndex].text;
282 }
283  
284 /**
285  * 得到下拉菜单的显示的值.
286  * @param {下拉菜单dom对象} selectObj
287  * @return {得到下拉菜单的显示的"值"}
288  */
289 function getSelectValue(selectObj) {
290         return selectObj.options[selectObj.selectedIndex].value;
291 }
292  
293 /**
294  * 设置下拉菜单的选择状态到指定的值.
295  * @param {下拉菜单对象} obj
296  * @param {要选择的值} value
297  */
298 function setSelectValue(obj, value) {
299         /*for (i = obj.options.length - 1; i >= 0; i--) {
300                 if (obj.options[i].value == value) {
301                         obj.options[i].selected = true;
302                         return;
303                 }
304         }
305 */
306       obj.value= value;
307 }
308  
309 /**
310  * 根据键值串的内容进行下拉菜单的动态组装
311  * @param {要进行下拉菜单组装的dom对象} obj
312  * @param {键值对用,和;分割,例如´1,男;2,女;3,未知´} valAndText
313  */
314 function setSelectContent(obj,valAndText){
315         if(trim(valAndText)==´´){
316                 alert(´没有要进行组装下拉菜单的数据!´);
317                 return false;
318         }
319         clearSelect(obj);
320         var keyandvalues = valAndText.split(´;´);
321         for(var i=0;i<keyandvalues.length;i++){
322                 var arr = keyandvalues[i].split(´,´);
323                 if(arr){
324                         var value =arr[0];
325                         var text =arr[1];
326                         var objOption = new Option(text,value);
327                         obj.add(objOption);
328                 }
329         }
330 }
331  
332 /**
333  * 清空下拉菜单里面的内容.
334  * @param {下拉菜单对象} obj
335  */
336 function clearSelect(obj) {
337     for (var i=obj.options.length; i >0; i--) {
338         obj.remove(0);
339     }
340 }
341  
342 /*************** 以下方法和多选框相关*************************************************/
343 /**
344  * 返回选中的checks的id组成的字符串,逗号隔开.
345  * @param {checks数组} checks
346  * @return 选择的id组成的字符串
347  */
348 function getCheckedIds(checks){
349         var selectedValue = ´´;
350         var len = checks.length;
351         for(var index=0; index<len; index++) {
352         if(checks[index].checked==true) {
353             selectedValue +=  checks[index].value+",";
354         }
355     }
356         if(selectedValue.length>0)
357                 return selectedValue.substring(0,selectedValue.length-1);
358     return selectedValue;
359 }

将上面的js保存之后,使用下面的html进行测试:

001 <HTML>
002         <HEAD>
003                 <script language="javascript" src="aaaaa.js"></script>
004         </HEAD>
005         <SCRIPT LANGUAGE="JavaScript">
006 <!--
007 /**
008  * 表单验证的示例js方法.
009  */
010 function check(){
011         if(checkIfEmpty(´a´,´非空校验´)
012                 &&checkIsMail(´b´,´邮箱校验´)
013                 &&checkIsNum(´c´,´数字校验´)
014                 &&checkIsValid(´d´,´合法性校验´)
015                 &&compareTwoDate(´e´,´f´,´小日期与大日期关系错误!´)
016                 &&checkLength(´g´,5,´长度校验´)
017                 &&checkChooseSelect(´h´,´下拉菜单非空´,´-1´)
018                 &&compareTwoNum(´k´,´l´,´大小数目关系不正确!´)){
019                 alert(´校验通过!´);
020                 return true;
021         }else{
022                 return false;
023         }
024 }
025  
026 /**
027  * 取下拉菜单的值和文本的示例js方法.
028  */
029 function getSelect(){
030         var sss = $(´h´);
031         alert(´下拉菜单选择的文本是:´+getSelectText(sss)+´\n´
032                         +´下拉菜单选择的值是:´+getSelectValue(sss));
033 }
034  
035 /**
036  * 根据键值字符串设置下拉菜单的显示内容.
037  */
038 function setSelect(){
039         var sss = $(´i´).value;
040         setSelectContent($(´h´),sss);
041 }
042  
043 /**
044  * 返回多选框数组选择状态的id的字符串,结果以逗号隔开.
045  */
046 function getMulti(){
047         alert(´多选选择的id是:´+getCheckedIds(document.getElementsByName(´j´)));
048 }
049 //-->
050 </SCRIPT>
051         <BODY>
052                 <table>
053                         <tr>
054                                 <td>
055                                         非空:
056                                         <input id=´a´>
057                                 </td>
058                                 <td>
059                                         checkIfEmpty(´a´,´非空校验´)
060                                 </td>
061                         </tr>
062                         <tr>
063                                 <td>
064                                         邮箱:
065                                         <input id=´b´ value=´323232@2323.com´>
066                                 </td>
067                                 <td>
068                                         checkIsMail(´b´,´邮箱校验´)
069                                 </td>
070                         </tr>
071                         <tr>
072                                 <td>
073                                         数字:
074                                         <input id=´c´ value=´aaaa´>
075                                 </td>
076                                 <td>
077                                         checkIsNum(´c´,´数字校验´)
078                                 </td>
079                         </tr>
080                         <tr>
081                                 <td>
082                                         合法字符:
083                                         <input id=´d´ value=´@$@$#$#!%%#´>
084                                 </td>
085                                 <td>
086                                         checkIsValid(´d´,´合法性校验´)
087                                 </td>
088                         </tr>
089                         <tr>
090                                 <td>
091                                         小的日期:
092                                         <input id=´e´ value=´2010-1-1´>
093                                         大的日期:
094                                         <input id=´f´ value=´2011-1-1´>
095                                 </td>
096                                 <td>
097                                         compareTwoDate(´e´,´f´,´小日期与大日期关系错误!´)
098                                 </td>
099                         </tr>
100                         <tr>
101                                 <td>
102                                         小的数:
103                                         <input id=´k´ value=´12.3´>
104                                         大的数:
105                                         <input id=´l´ value=´4564´>
106                                 </td>
107                                 <td>
108                                         compareTwoNum(´k´,´l´,´大小数目关系不正确!´)
109                                 </td>
110                         </tr>
111                         <tr>
112                                 <td>
113                                         字符长度校验(<5):
114                                         <input id=´g´>
115                                 </td>
116                                 <td>
117                                         checkLength(´g´,5,´长度校验´)
118                                 </td>
119                         </tr>
120                         <tr>
121                                 <td>
122                                         下拉菜单非空校验:
123                                         <select id=´h´>
124                                                 <option value=´-1´>
125                                                         请选择
126                                                 </option>
127                                                 <option value=´1´>
128                                                         立项
129                                                 </option>
130                                                 <option value=´2´>
131                                                         可研
132                                                 </option>
133                                         </select>
134                                 </td>
135                                 <td>
136                                         checkChooseSelect(´h´,´下拉菜单非空´,´-1´)
137                                 </td>
138                         </tr>
139                         <tr>
140                                 <td colspan=´2´>
141                                         <button onclick=´check()´>
142                                                 测试表单校验方法
143                                         </button>
144                                 </td>
145                         </tr>
146                         <tr>
147                                 <td>
148  
149                                         <button onclick=´getSelect()´>
150                                                 得到下拉菜单的值
151                                         </button>
152                                 </td>
153                                 <td>
154                                         getSelectText(sss)和getSelectValue(sss)
155                                 </td>
156                         </tr>
157                         <tr>
158                                 <td>
159                                         输入下拉菜单的键值字符串(如右所示)
160                                         <input id=´i´ value=´1,男;2,女;3,未知´>
161                                         <button onclick=´setSelect()´>
162                                                 设置下拉菜单的值
163                                         </button>
164                                 </td>
165                                 <td>
166                                         setSelectContent($(´h´),sss)
167                                 </td>
168                         </tr>
169                         <tr>
170                                 <td>
171  
172                                         <input type=´checkbox´ name=´j´ value=´aaa1´>
173                                         <input type=´checkbox´ name=´j´ value=´aaa2´>
174                                         <input type=´checkbox´ name=´j´ value=´aaa3´>
175                                         <input type=´checkbox´ name=´j´ value=´aaa4´>
176                                         <button onclick=´getMulti()´>
177                                                 得到多选选择的id
178                                         </button>
179                                 </td>
180                                 <td>
181                                         getCheckedIds(document.getElementsByName(´j´))
182                                 </td>
183                         </tr>
184                 </table>
185         </BODY>
186 </HTML>