javascript常用功能匯總
更新時間：2015年07月05日 09:57:51 投稿：hebedich
本文給大家總結(jié)了12個javascript常用的基本功能，十分的實用，這里推薦給大家,需要的朋友可以參考下
1.javascript的數(shù)組API：
//定義數(shù)組
var pageIds = new Array();
pageIds.push('A');
數(shù)組長度
pageIds.length;
//shift：刪除原數(shù)組第一項，并返回刪除元素的值；如果數(shù)組為空則返回undefined
var a = [1,2,3,4,5];
var b = a.shift(); //a：[2,3,4,5] b：1
//unshift：將參數(shù)添加到原數(shù)組開頭，并返回數(shù)組的長度
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，F(xiàn)F2.0下測試返回值為7，所以這個方法的返回值不可靠，需要用返回值時可用splice代替本方法來使用。
//pop：刪除原數(shù)組最后一項，并返回刪除元素的值；如果數(shù)組為空則返回undefined
var a = [1,2,3,4,5];
var b = a.pop(); //a：[1,2,3,4] b：5
//push：將參數(shù)添加到原數(shù)組末尾，并返回數(shù)組的長度
var a = [1,2,3,4,5];
var b = a.push(6,7); //a：[1,2,3,4,5,6,7] b：7
//concat：返回一個新數(shù)組，是將參數(shù)添加到原數(shù)組中構(gòu)成的
var a = [1,2,3,4,5];
var b = a.concat(6,7); //a：[1,2,3,4,5] b：[1,2,3,4,5,6,7]
//splice(start,deleteCount,val1,val2,)：從start位置開始刪除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：將數(shù)組反序
var a = [1,2,3,4,5];
var b = a.reverse(); //a：[5,4,3,2,1] b：[5,4,3,2,1]
//sort(orderfunction)：按指定的參數(shù)對數(shù)組進(jìn)行排序
var a = [1,2,3,4,5];
var b = a.sort(); //a：[1,2,3,4,5] b：[1,2,3,4,5]
//slice(start,end)：返回從原數(shù)組中指定開始下標(biāo)到結(jié)束下標(biāo)之間的項組成的新數(shù)組
var a = [1,2,3,4,5];
var b = a.slice(2,5); //a：[1,2,3,4,5] b：[3,4,5]
//join(separator)：將數(shù)組的元素組起一個字符串，以separator為分隔符，省略的話則用默認(rèn)用逗號為分隔符
var a = [1,2,3,4,5];
var b = a.join("|"); //a：[1,2,3,4,5] b："1|2|3|4|5"
2.dom最常用API：
//document方法： getElementById(id) Node 返回指定結(jié)點的引用 getElementsByTagName(name) NodeList 返回文檔中所有匹配的元素的集合 createElement(name) Node Node createTextNode(text) Node 創(chuàng)建一個純文本結(jié)點 ownerDocument Document 指向這個節(jié)點所屬的文檔 documentElement Node 返回html節(jié)點 document.body Node 返回body節(jié)點 //element方法： getAttribute(attributeName) String 返回指定屬性的值 setAttribute(attributeName,value) String 給屬性賦值 removeAttribute(attributeName) String 移除指定屬性和它的值 getElementsByTagName(name) NodeList 返回結(jié)點內(nèi)所有匹配的元素的集合 //node方法： appendChild(child) Node 給指定結(jié)點添加一個新的子結(jié)點 removeChild(child) Node 移除指定結(jié)點的子結(jié)點 replaceChild(newChild,oldChild) Node 替換指定結(jié)點的子結(jié)點 insertBefore(newChild,refChild) Node 在同一層級的結(jié)點前面插入新結(jié)點 hasChildNodes() Boolean 如果結(jié)點有子結(jié)點則返回true //node屬性： nodeName String 以字符串的格式存放結(jié)點的名稱 nodeType String 以整型數(shù)據(jù)格式存放結(jié)點的類型 nodeValue String 以可用的格式存放結(jié)點的值 parentNode Node 指向結(jié)點的父結(jié)點的引用 childNodes NodeList 指向子結(jié)點的引用的集合 firstChild Node 指向子結(jié)點結(jié)合中的第一個子結(jié)點的引用 lastChild Node 指向子結(jié)點結(jié)合中的最后一個子結(jié)點的引用 previousSibling Node 指向前一個兄弟節(jié)點；如果這個節(jié)點就是兄弟節(jié)點，那么該值為null nextSibling Node 指向后一個兄弟節(jié)點；如果這個節(jié)點就是兄弟節(jié)點，那么該值為null
3.網(wǎng)上搜藏的一個map對象:
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時 ，自動調(diào)用了該對象的 toString() 方法 其實最終還是以String對象為Key**/
/** 如果是自定義對象 那自己得重寫 toString() 方法 否則 . 就是下面的結(jié)果 **/
function MyObject(name)
{
this.name = name;
}
/**
function MyObject(name)
{
this.name = name;
this.toString = function ()
{
return this.name;
}
}
**/
var object1 = new MyObject("小張");
var object2 = new MyObject("小名");
map.put(object1,"小張");
map.put(object2,"小名");
alert(map.get(object1));
alert(map.get(object2));
map.remove("xxxxx");
alert(map.size());
/** 運行結(jié)果 小名 小名 size = 1 **/
/** 如果改成復(fù)寫toString()方法的對象 , 效果就完全不一樣了 **/
4.常用的數(shù)字函數(shù):
//·數(shù)字型(Number)
//1.聲明
var i = 1;
var i = new Number(1);
//2.字符串與數(shù)字間的轉(zhuǎn)換
var i = 1;
var str = i.toString(); //結(jié)果: "1"
var str = new String(i); //結(jié)果: "1"
i = parseInt(str); //結(jié)果: 1
i = parseFloat(str); //結(jié)果: 1.0
//注意: parseInt,parseFloat會把一個類似于"32G"的字符串,強制轉(zhuǎn)換成32
//3.判斷是否為有效的數(shù)字
var i = 123; var str = "string";
if( typeof i == "number" ){ } //true
//某些方法(如:parseInt,parseFloat)會返回一個特殊的值NaN(Not a Number)
//請注意第2點中的[注意],此方法不完全適合判斷一個字符串是否是數(shù)字型!!
i = parseInt(str);
if( isNaN(i) ){ }
//4.數(shù)字型比較
//此知識與[字符串比較]相同
///5.小數(shù)轉(zhuǎn)整數(shù)
var f = 1.5;
var i = Math.round(f); //結(jié)果:2 (四舍五入)
var i = Math.ceil(f); //結(jié)果:2 (返回大于f的最小整數(shù))
var i = Math.floor(f); //結(jié)果:1 (返回小于f的最大整數(shù))
//6.格式化顯示數(shù)字
var i = 3.14159;
//格式化為兩位小數(shù)的浮點數(shù)
var str = i.toFixed(2); //結(jié)果: "3.14"
//格式化為五位數(shù)字的浮點數(shù)(從左到右五位數(shù)字,不夠補零)
var str = i.toPrecision(5); //結(jié)果: "3.1415"
//7.X進(jìn)制數(shù)字的轉(zhuǎn)換
//不是很懂 -.-
var i = parseInt("0x1f",16);
var i = parseInt(i,10);
var i = parseInt("11010011",2);
//8.隨機數(shù)
//返回0-1之間的任意小數(shù)
var rnd = Math.random();
//返回0-n之間的任意整數(shù)(不包括n)
var rnd = Math.floor(Math.random() * n)
5.網(wǎng)上搜藏的js堆棧:
function stack(){
if(this.top==undefined){
//初始化堆棧的頂部指針和數(shù)據(jù)存放域
this.top=0;
this.unit=new Array();
}
this.push=function(pushvalue){
//定義壓入堆棧的方法
this.unit[this.top]=pushvalue;
this.top+=1;
}
this.readAllElements=function(){
//定義讀取所有數(shù)據(jù)的方法
if(this.top==0){
alert("當(dāng)前棧空，無法讀取數(shù)據(jù)");
return("");
}
var count=0;
var outStr="";
for(count=0;count<this.top;count++){
outStr+=this.unit[count]+",";
}
return(outStr);
}
this.pop=function(){
//定義彈出堆棧的方法
if(this.top==0){
alert("當(dāng)前?？眨瑹o法彈出數(shù)據(jù)");
return("");
}
var popTo=this.unit[this.top-1];
this.top--;
return(popTo);
/* 從堆棧彈出數(shù)據(jù)，頂部指針減一，不過這里沒有做到資源的釋放，也
就是說數(shù)據(jù)仍然存在于this.unit的數(shù)組中，只不過無法訪問罷了。目前
我也沒想到好的辦法解決。*/
}
}
6.最常用的JavaScript日期函數(shù):
//·日期型(Date)
//1.聲明
var myDate = new Date(); //系統(tǒng)當(dāng)前時間
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(); //獲取當(dāng)前年份(2位)
myDate.getFullYear(); //獲取完整的年份(4位,1970-????)
myDate.getMonth(); //獲取當(dāng)前月份(0-11,0代表1月)
myDate.getDate(); //獲取當(dāng)前日(1-31)
myDate.getDay(); //獲取當(dāng)前星期X(0-6,0代表星期天)
myDate.getTime(); //獲取當(dāng)前時間(從1970.1.1開始的毫秒數(shù)) 時間戳?。?
myDate.getHours(); //獲取當(dāng)前小時數(shù)(0-23)
myDate.getMinutes(); //獲取當(dāng)前分鐘數(shù)(0-59)
myDate.getSeconds(); //獲取當(dāng)前秒數(shù)(0-59)
myDate.getMilliseconds(); //獲取當(dāng)前毫秒數(shù)(0-999)
myDate.toLocaleDateString(); //獲取當(dāng)前日期
myDate.toLocaleTimeString(); //獲取當(dāng)前時間
myDate.toLocaleString( ); //獲取日期與時間
//3.計算之前或未來的時間
var myDate = new Date();
myDate.setDate(myDate.getDate() + 10); //當(dāng)前時間加10天
//類似的方法都基本相同,以set開頭,具體參考第2點
//4.計算兩個日期的偏移量
var i = daysBetween(beginDate,endDate); //返回天數(shù)
var i = beginDate.getTimezoneOffset(endDate); //返回分鐘數(shù)
//5.檢查有效日期
//checkDate() 只允許"mm-dd-yyyy"或"mm/dd/yyyy"兩種格式的日期
if( checkDate("2006-01-01") ){ }
//正則表達(dá)式(自己寫的檢查 yyyy-mm-dd, yy-mm-dd, yyyy/mm/dd, yy/mm/dd 四種)
var r = /^(\d{2}|\d{4})[\/-]\d{1,2}[\/-]\d{1,2}$/;
if( r.test( myString ) ){ }
7.最常用字符串函數(shù)API:
//·字符串(String)
//1.聲明
var myString = new String("Every good boy does fine.");
var myString = "Every good boy does fine.";
//2.字符串連接
var myString = "Every " + "good boy " + "does fine.";
var myString = "Every "; myString += "good boy does fine.";
//3.截取字符串
//截取第 6 位開始的字符
var myString = "Every good boy does fine.";
var section = myString.substring(6); //結(jié)果: "good boy does fine."
//截取第 0 位開始至第 10 位為止的字符
var myString = "Every good boy does fine.";
var section = myString.substring(0,10); //結(jié)果: "Every good"
//截取從第 11 位到倒數(shù)第 6 位為止的字符
var myString = "Every good boy does fine.";
var section = myString.slice(11,-6); //結(jié)果: "boy does"
//從第 6 位開始截取長度為 4 的字符
var myString = "Every good boy does fine.";
var section = myString.substr(6,4); //結(jié)果: "good"
//4.轉(zhuǎn)換大小寫
var myString = "Hello";
var lcString = myString.toLowerCase(); //結(jié)果: "hello"
var ucString = myString.toUpperCase(); //結(jié)果: "HELLO"
//5.字符串比較
var aString = "Hello!";
var bString = new String("Hello!");
if( aString == "Hello!" ){ } //結(jié)果: true
if( aString == bString ){ } //結(jié)果: true
if( aString === bString ){ } //結(jié)果: false (兩個對象不同,盡管它們的值相同)
//6.檢索字符串
var myString = "hello everybody.";
// 如果檢索不到會返回-1,檢索到的話返回在該串中的起始位置
if( myString.indexOf("every") > -1 ){ } //結(jié)果: true
////7.查找替換字符串
var myString = "I is your father.";
var result = myString.replace("is","am"); //結(jié)果: "I am your father."
//8.特殊字符:
//\b : 后退符 \t : 水平制表符
//\n : 換行符 \v : 垂直制表符
//\f : 分頁符 \r : 回車符
//\" : 雙引號 \' : 單引號
//\\ : 反斜桿
//9.將字符轉(zhuǎn)換成Unicode編碼
var myString = "hello";
var code = myString.charCodeAt(3); //返回"l"的Unicode編碼(整型)
var char = String.fromCharCode(66); //返回Unicode為66的字符
//10.將字符串轉(zhuǎn)換成URL編碼
var myString = "hello all";
var code = encodeURI(myString); //結(jié)果: "hello%20all"
var str = decodeURI(code); //結(jié)果: "hello all"
//相應(yīng)的還有: encodeURIComponent() decodeURIComponent()
8.數(shù)學(xué)函數(shù):
·Math對象 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的最小整數(shù) 7. Math.cos(num) : 返回num的余弦值 8. Math.exp(x) : 返回以自然數(shù)為底,x次冪的數(shù) 9. Math.floor(num) : 返回小于num的最大整數(shù) 10.Math.log(num) : 返回num的自然對數(shù) 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之間的一個隨機數(shù) 15.Math.round(num) : 返回num四舍五入后的值 16.Math.sin(num) : 返回num的正弦值 17.Math.sqrt(num) : 返回num的平方根 18.Math.tan(num) : 返回num的正切值 19.Math.E : 自然數(shù)(2.718281828459045) 20.Math.LN2 : 2的自然對數(shù)(0.6931471805599453) 21.Math.LN10 : 10的自然對數(shù)(2.302585092994046) 22.Math.LOG2E : log 2 為底的自然數(shù)(1.4426950408889634) 23.Math.LOG10E : log 10 為底的自然數(shù)(0.4342944819032518) 24.Math.PI : π(3.141592653589793) 25.Math.SQRT1_2 : 1/2的平方根(0.7071067811865476) 26.Math.SQRT2 : 2的平方根(1.4142135623730951)
9.瀏覽器特征函數(shù):
//1.瀏覽器名稱
//IE : "Microsoft Internet Explorer"
//NS : "Netscape"
var browserName = navigator.appName;
//2.瀏覽器版本
var browserVersion = navigator.appVersion;
//3.客戶端操作系統(tǒng)
var isWin = ( navigator.userAgent.indexOf("Win") != -1 );
var isMac = ( navigator.userAgent.indexOf("Mac") != -1 );
var isUnix = ( navigator.userAgent.indexOf("X11") != -1 );
//4.判斷是否支持某對象,方法,屬性
//當(dāng)一個對象,方法,屬性未定義時會返回undefined或null等,這些特殊值都是false
if( document.images ){ }
if( document.getElementById ){ }
//5.檢查瀏覽器當(dāng)前語言
if( navigator.userLanguage ){ var l = navigator.userLanguage.toUpperCase(); }
//6.檢查瀏覽器是否支持Cookies
if( navigator.cookieEnabled ){ }
10.JavaScript面向?qū)ο蟮姆椒▽崿F(xiàn)繼承:call方法
// 動物類 animal
function animal(bSex){
this.sex = bSex
this.getSex = function(){
return this.sex
}
}
// 類靜態(tài)變量 (如果你不修改它的話～～)
animal.SEX_G = new Object(); // 雌性
animal.SEX_B = new Object(); // 雄性
// 動物子類 鳥
function bird(bSex){
animal.call(this, bSex);
this.fly = function(iSpeed){
alert("飛行時速高達(dá) " + iSpeed);
}
}
// 動物子類 魚
function fish(bSex){
animal.call(this, bSex);
this.swim = function(iSpeed){
alert("游動時速高達(dá) " + 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.用面向?qū)ο蟮木幊谭绞綄慗avaScript:
MyTool = new function(){
/**
* 返回非空字符串,如果有默認(rèn)值就返回默認(rèn)字符串.
*/
this.notNull = function(str,defaultStr){
if(typeof(str)=="undefined"||str==null||str==''){
if(defaultStr)
return defaultStr;
else
return '';
}
else{
return str;
}
}
}
rootId = MyTool.notNull(rootId,'001000');
12.常用的js方法,包括表單校驗的一些方法,下拉菜單常用的方法等等:
/**
* 對JSON對象轉(zhuǎn)換為字符串.
* @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字符串轉(zhuǎn)換為json對象.
* @param {json字符串} jsonstr
* @return {json對象}
*/
function jsonStr2Obj(jsonstr) {
return eval("("+jsonstr+")");
}
/**
* 得到一個元素的left坐標(biāo)值.
* @param {dom對象} obj
* @return {位置值}
*/
function getLeft(obj){
var offset=e.offsetLeft;
if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
return offset;
}
/**
* 得到一個元素的絕對位置的top坐標(biāo)值.
* @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,"");
}
/**
* 根據(jù)id取出一個元素.
* @param {元素id值} str
* @return {dom對象}
*/
function $(str) {
return document.getElementById(str);
}
/**
* 按name獲取一個對象.
* @param {元素name值} str
* @return {根據(jù)name返回的第一個對象}
*/
function $byName(str) {
var arr = document.getElementsByName(str);
if (arr)
return arr[0];
else
return null;
}
/***************以下方法和表單驗證相關(guān)*************************************************/
/**
* 返回非空字符串,如果有默認(rèn)值就返回默認(rèn)字符串.
* @param {要進(jìn)行轉(zhuǎn)換的原字符串} str
* @param {默認(rèn)值} defaultStr
* @return {返回結(jié)果}
*/
function notNull(str, defaultStr) {
if (typeof(str) == "undefined" || str == null || str == '') {
if (defaultStr)
return defaultStr;
else
return '';
} else {
return str;
}
}
/**
* 比較兩個日期大小.
* @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 {文本框描述內(nèi)容} 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 {文本框描述內(nèi)容} 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;
}
}
/**
* 判斷指定文本框內(nèi)容必須為郵件.
* @param {文本框id} textId
* @param {文本框描述} msg
* @return {如果是郵件內(nèi)容就返回true否則返回false}
*/
function checkIsMail(textId, msg) {
var obj = $(textId);
if (!_isEmail(obj.value)) {
alert('[' + msg + ']不是合法的郵件地址！');
obj.focus();
return false;
} else
return true;
}
/**
* 驗證是不是郵件.
* @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;
}
/**
* 判斷某個文本框是否數(shù)字.
* @param {文本框id} textId
* @param {文本框描述內(nèi)容} msg
* @return {Boolean}
*/
function checkIsNum(textId, msg) {
obj = $(textId);
if (isNaN(obj.value)) {
alert('[' + msg + ']必須為數(shù)字。');
obj.focus();
return false;
} else
return true;
}
/**
* 判斷某個文本框是否含有非法字符.
* @param {文本框的id} textId
* @param {文本框描述內(nèi)容} msg
* @return {有錯就返回false否則返回true}
*/
function checkIsValid(textId, msg) {
obj = $(textId);
if (!_isValidString(obj.value, '[' + msg + ']不得含有非法字符。')) {
obj.focus();
return false;
}
return true;
}
/**
* 判斷是不是合法字符串.
* @param {要進(jìn)行判斷的字符串} szStr
* @param {文本描述} errMsg
* @return {合法則返回true否則返回false}
*/
function _isValidString(szStr,errMsg) {
voidChar = "'\"><`~!@#$%^&\(\)（）?。ぁ?？?“”‘'*";
for (var i = 0; i < voidChar.length; i++) {
aChar = voidChar.substring(i, i + 1);
if (szStr.indexOf(aChar) > -1){
alert(errMsg)
return false;
}
}
return true;
}
/*************** 以下方法和下拉菜單相關(guān)*************************************************/
/**
* 控制下拉菜單不可以為-1(未選擇情況value=-1)
* @param {下拉菜單id} selectId
* @param {下拉菜單描述內(nèi)容} msg
* @param {下拉菜單的空值對應(yīng)的value,默認(rèn)為-1} nullValue
* @return {Boolean}
*/
function checkChooseSelect(selectId, msg ,nullValue) {
var obj = $(selectId);
if (obj.value == notNull(nullValue,'-1')) {
alert('[' + msg + ']必選!');
obj.focus();
return false;
} else
return true;
}
/**
* 得到下拉菜單的顯示的文字.
* @param {下拉菜單dom對象} selectObj
* @return {返回下拉菜單的顯示的"文本"}
*/
function getSelectText(selectObj) {
return selectObj.options[selectObj.selectedIndex].text;
}
/**
* 得到下拉菜單的顯示的值.
* @param {下拉菜單dom對象} selectObj
* @return {得到下拉菜單的顯示的"值"}
*/
function getSelectValue(selectObj) {
return selectObj.options[selectObj.selectedIndex].value;
}
/**
* 設(shè)置下拉菜單的選擇狀態(tài)到指定的值.
* @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;
}
/**
* 根據(jù)鍵值串的內(nèi)容進(jìn)行下拉菜單的動態(tài)組裝
* @param {要進(jìn)行下拉菜單組裝的dom對象} obj
* @param {鍵值對用,和;分割,例如'1,男;2,女;3,未知'} valAndText
*/
function setSelectContent(obj,valAndText){
if(trim(valAndText)==''){
alert('沒有要進(jìn)行組裝下拉菜單的數(shù)據(jù)!');
return false;
}
clearSelect(obj);
var keyandvalues = valAndText.split(';');
for(var i=0;i<keyandvalues.length;i++){
var arr = keyandvalues[i].split(',');
if(arr){
var value =arr[0];
var text =arr[1];
var objOption = new Option(text,value);
obj.add(objOption);
}
}
}
/**
* 清空下拉菜單里面的內(nèi)容.
* @param {下拉菜單對象} obj
*/
function clearSelect(obj) {
for (var i=obj.options.length; i >0; i--) {
obj.remove(0);
}
}
/*************** 以下方法和多選框相關(guān)*************************************************/
/**
* 返回選中的checks的id組成的字符串,逗號隔開.
* @param {checks數(shù)組} checks
* @return 選擇的id組成的字符串
*/
function getCheckedIds(checks){
var selectedValue = '';
var len = checks.length;
for(var index=0; index<len; index++) {
if(checks[index].checked==true) {
selectedValue += checks[index].value+",";
}
}
if(selectedValue.length>0)
return selectedValue.substring(0,selectedValue.length-1);
return selectedValue;
}
下面的代碼放到html標(biāo)簽里，并在head里調(diào)用上面的js：
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--<<<<<<<<<<<調(diào)用上面的js>>>>>>>>>-->
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
/**
* 表單驗證的示例js方法.
*/
function check(){
if(checkIfEmpty('a','非空校驗')
&&checkIsMail('b','郵箱校驗')
&&checkIsNum('c','數(shù)字校驗')
&&checkIsValid('d','合法性校驗')
&&compareTwoDate('e','f','小日期與大日期關(guān)系錯誤!')
&&checkLength('g',5,'長度校驗')
&&checkChooseSelect('h','下拉菜單非空','-1')
&&compareTwoNum('k','l','大小數(shù)目關(guān)系不正確!')){
alert('校驗通過!');
return true;
}else{
return false;
}
}
/**
* 取下拉菜單的值和文本的示例js方法.
*/
function getSelect(){
var sss = $('h');
alert('下拉菜單選擇的文本是:'+getSelectText(sss)+'\n'
+'下拉菜單選擇的值是:'+getSelectValue(sss));
}
/**
* 根據(jù)鍵值字符串設(shè)置下拉菜單的顯示內(nèi)容.
*/
function setSelect(){
var sss = $('i').value;
setSelectContent($('h'),sss);
}
/**
* 返回多選框數(shù)組選擇狀態(tài)的id的字符串,結(jié)果以逗號隔開.
*/
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> 數(shù)字:
<input id='c' value='aaaa'></td>
<td> checkIsNum('c','數(shù)字校驗') </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','小日期與大日期關(guān)系錯誤!') </td>
</tr>
<tr>
<td> 小的數(shù):
<input id='k' value='12.3'>
大的數(shù):
<input id='l' value='4564'></td>
<td> compareTwoNum('k','l','大小數(shù)目關(guān)系不正確!') </td>
</tr>
<tr>
<td> 字符長度校驗(<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()'> 設(shè)置下拉菜單的值 </button></td>
<td> setSelectContent($('h'),sss) </td>
</tr>
<tr>
<td><input type='checkbox' name='j' value='aaa1'>
<input type='checkbox' name='j' value='aaa2'>
<input type='checkbox' name='j' value='aaa3'>
<input type='checkbox' name='j' value='aaa4'>
<button onclick='getMulti()'> 得到多選選擇的id </button></td>
<td> getCheckedIds(document.getElementsByName('j')) </td>
</tr>
</table>
</BODY>
以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。
相關(guān)文章
數(shù)組 重復(fù)采用的是Object的 in 操作符，體現(xiàn)一把它的強大（有更好的辦法來實現(xiàn)這個功能，但是這里只是演示 in 操作符）！2008-03-03
下面小編就為大家?guī)硪黄猨s 獲取經(jīng)緯度的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
本篇文章主要介紹了詳解webpack4升級指南以及從webpack3.x遷移，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
截取小數(shù)點后幾位的方法有很多，下面為大家介紹下使用js是如何實現(xiàn)的2013-11-11
JavaScript實現(xiàn)復(fù)制粘貼剪切功能三種方法
這篇文章主要給大家介紹了關(guān)于JavaScript實現(xiàn)復(fù)制粘貼剪切功能的相關(guān)資料,在實際案例的操作過程中,不少人都會遇到這樣的開發(fā)需求,文中通過代碼將三種方法介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
這篇文章主要介紹了js中取得變量絕對值的方法,較為詳細(xì)的分析了js中abs方法取絕對值的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-01-01
ff chrome和ie下全局動態(tài)定位的異同及全局高度的取法
這篇文章主要介紹了ff chrome和ie下全局動態(tài)定位的異同及全局高度的取法,需要的朋友可以參考下2014-06-06
Web版彷 Visual Studio 2003 顏色選擇器
Web版彷 Visual Studio 2003 顏色選擇器...2007-01-01
這篇文章主要介紹了前端實現(xiàn)截屏的兩種常見方式,分別是使用第三方庫html2canvas和navigator.mediaDevices.getDisplayMedia,兩種方法都給出了詳細(xì)的代碼示例,需要的朋友可以參考下2025-03-03
下面小編就為大家?guī)硪黄獁indow.open打開窗口被攔截的快速解決方法。覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08