推薦一個(gè)自己用的封裝好的javascript插件
更新時(shí)間：2015年01月29日 10:02:38 投稿：hebedich
本文推薦給大家一款自用的封裝好的javascript插件，常用的一些檢測(cè)全部都涵蓋了，非常實(shí)用，推薦給小伙伴們。
具體內(nèi)容請(qǐng)看注釋?zhuān)@里就不多BB了，
奉上代碼：
/// <reference path="vendor/jquery-1.4.1-vsdoc.js" />
///檢測(cè)表單中的不能為空（.notnull）的驗(yàn)證
/*
時(shí)間：2012-6-6
作用：一對(duì)form標(biāo)簽下有多個(gè)（包括一個(gè)）表單需要提交時(shí)，使用js準(zhǔn)確的判斷當(dāng)前按鈕對(duì)那些元素做判斷
用法：在form標(biāo)簽下 找到當(dāng)前 表單的容器 給予class="form"，當(dāng)前表單的提交按鈕給予 class="check"
需要驗(yàn)證為空的元素給予class="notnull" nullmsg="xx不能為空！"提示，需要進(jìn)行邏輯判斷的表單給予class="need"
判斷的類(lèi)型給予 class="num"(只能是數(shù)字) 驗(yàn)證的提示 logicmsg="XX只能是數(shù)字"
給予class="errorMessage"顯示錯(cuò)誤信息塊
給予class="warn"顯示錯(cuò)誤信息
未使用js面向?qū)ο缶幊?
邏輯判斷，不傳入need標(biāo)識(shí)，直接給出正則表達(dá)式屬性（自定義）regex="/^\d$/" 做出判斷
在外部實(shí)現(xiàn)
Global.submitCallback button回調(diào)函數(shù)
Global.confirmCallback confirm回調(diào)函數(shù);
需要改進(jìn)的地方：
暫無(wú)
更新時(shí)間：2014年12月3日 16:23:22
作者：Amber.Xu
*/
//$(document).ready(
// function () {
// $("form").find(".notnull").bind({
// focus: function () {
// if ($(this).attr("value") == this.defaultValue) {
// $(this).attr("value", "");
// }
// },
// blur: function () {
// if ($(this).attr("value") == "") {
// $(this).attr("value", this.defaultValue);
// }
// }
// });
// }
//);
///*封裝一個(gè)萬(wàn)能檢測(cè)表單的方法*/
///event.srcElement：引發(fā)事件的目標(biāo)對(duì)象，常用于onclick事件。
///event.fromElement：引發(fā)事件的對(duì)象源，常用于onmouseout和onmouseover事件。
///event.toElement：引發(fā)事件后，鼠標(biāo)移動(dòng)到的目標(biāo)源，常用于onmouseout和onmouseover事件。
function Global() {
var _self = this;
}
Global.submitCallback = null;
Global.confirmCallback = null;
$(document).ready(function () {
//form body
$("body").find(".form").each(function () {
this.onclick = function (e) {
var button = null;
try {
button = e.srcElement == null ? document.activeElement : e.srcElement;
} catch (e) {
console.log(e.message)
button = document.activeElement;
}
if ($(button).is(".check")) {
//alert("提交")
var sub = (checkform(this) && CheckInputRex(this) && checkselect(this) && checkChecked(this));
if (sub) {
// Call our callback, but using our own instance as the context
Global.submitCallback.call(this, [e]);
}
return sub;
} else if ($(button).is(".confirm")) {
//alert("刪除")
var sub = confirm($(button).attr("title"));
if (sub) {
Global.confirmCallback.call(this, [e]);
}
return sub;
} else {
// //alert("其它")
return true;
}
}
});
/*檢測(cè)表單中不能為空的元素*/
function checkform(form) {
var b = true;
$(form).find(".notnull").each(function () {
if ($.trim($(this).val()).length <= 0) {//|| $(this).val() == this.defaultValue
// if (this.value != null) {
// $(this).attr("value", "");
// }
//alert($(this).attr("msg"))
$(this).parents(".form").find(".warn").text($(this).attr("nullmsg"));
$(this).parents(".form").find(".errorMessage").show();
$(this).select();
$(this).focus();
return b = false;
}
});
if (b == true) {
$(form).find(".warn").text("");
$(form).find(".errorMessage").hide();
}
return b;
}
/*檢測(cè)表單中必選的下拉列表*/
function checkselect(form) {
var b = true;
$(form).find(".select").each(function (i) {
var ck = $(this).find('option:selected').text();
if (ck.indexOf("選擇") > -1) {
$(this).parents(".form").find(".warn").text($(this).attr("nullmsg"));
$(this).parents(".form").find(".errorMessage").show();
$(this).select();
$(this).focus();
return b = false;
}
});
return b;
}
/*檢測(cè)表單中必選的復(fù)選框*/
function checkChecked(form) {
var b = true;
$(form).find(".checkbox").each(function (i) {
var ck = $(this)[0].checked;
if (!ck) {
$(this).parents(".form").find(".warn").text($(this).attr("nullmsg"));
$(this).parents(".form").find(".errorMessage").show();
$(this).select();
$(this).focus();
return b = false;
}
});
return b;
}
//檢查是否匹配該正則表達(dá)式
function GetFlase(value, reg, ele) {
if (reg.test(value)) {
return true;
}
$(ele).parents(".form").find(".warn").text($(ele).attr("logicmsg"));
$(ele).parents(".form").find(".errorMessage").show();
$(ele).focus();
$(ele).select();
return false; //不能提交
}
function CheckInputRex(form) {
var b = true;
$(form).find("input[type='text']").each(function () {
if (typeof ($(this).attr("regex")) == 'string') {
if ($.trim($(this).val()).length > 0 && $(this).val() != this.defaultValue) {
//當(dāng)前表單的值
var value = $(this).attr("value") || $(this).val();
var regx = eval($(this).attr("regex"));
return b = GetFlase(value, regx, this);
}
}
});
return b;
}
///檢查用戶輸入的相應(yīng)的字符是否合法
///此方法已廢棄
function CheckInput(form) {
var b = true;
$(form).find(".need").each(function () {
if ($.trim($(this).val()).length > 0 && $(this).val() != this.defaultValue) {
//當(dāng)前表單的值
var value = $(this).attr("value");
//id的值或者name的屬性的值如：[name="contact"]
var name = $(this).attr("class");
//檢查需要輸入的內(nèi)容是否合法如：聯(lián)系方式
var len = name.split(" ");
for (var i = 0; i < len.length; i++) {
switch ($.trim(len[i])) {
///聯(lián)系方式
case "mobile":
var reg = /^1\d{10}$/;
return b = GetFlase(value, reg, this);
break;
///郵箱
case "email":
var reg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
return b = GetFlase(value, reg, this);
break;
///兩次密碼是否一致
case "password":
break;
case "password2":
if ($("#password").attr("value") != $("#password2").attr("value")) {
$(this).select(); //獲取焦點(diǎn)
$(this).parents(".form").find(".warn").text($(this).attr("logicmsg"));
$(this).parents(".form").find(".errorMessage").show();
return b = false; //不能提交
}
break;
case "worktel":
case "hometel": //家庭電話
var reg = /^\d{8}$/;
return b = GetFlase(value, reg, this);
break;
case "post": //郵編
var reg = /^\d{6}$/;
return b = GetFlase(value, reg, this);
break;
case "bonus":
case "allowance":
case "FixedSalary":
var reg = /^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0|[1-9]\d)$/;
return b = GetFlase(value, reg, this);
break;
case "identity":
var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
return b = GetFlase(value, reg, this);
break;
case "height":
var reg = /^[1-2][0-9][0-9]$/;
return b = GetFlase(value, reg, this);
break;
case "qq":
var reg = /^[1-9][0-9]{4,}$/;
return b = GetFlase(value, reg, this);
break;
case "begintime":
case "endtime":
var reg = /^\d{4}$/;
if (reg.test(value) && (parseInt($(".endtime").val()) > parseInt($(".begintime").val()))) {
return b;
}
$.ligerDialog.alert($(this).attr("msg"))
$(this).select(); //獲取焦點(diǎn)
return b = false; //不能提交
break;
case "num":
var reg = /^\d+$/;
return b = GetFlase(value, reg, this);
break;
///大陸去香港需要辦理往來(lái)港澳通行證和香港的簽注.因私普通護(hù)照號(hào)碼格式有:
///14/15+7位數(shù),G+8位數(shù)；
///因公普通的是:P.+7位數(shù)；
///公務(wù)的是：S.+7位數(shù) 或者
//S+8位數(shù),以D開(kāi)頭的是外交護(hù)照
case "postport": //護(hù)照號(hào)碼
var reg = /^(P\d{7}|G\d{8}|S\d{7,8}|D\d+|1[4,5]\d{7})$/;
return b = GetFlase(value, reg, this);
break;
case "bankaccount":
var reg = /^[0-9]{19}$/;
return b = GetFlase(value, reg, this);
break;
} //switch
} //for
}
});
return b;
}
///此方法已經(jīng)廢棄
});
///單擊改變背景顏色
$(document).ready(function () {
var inputs = $("#top>.c>input");
$(inputs).each(function () {
this.onclick = function () {
document.getElementById("main").style.backgroundColor = this.name;
//$("#main").backgroundColor = this.name;
}
});
});
基本上常用的功能都封裝在內(nèi)了，希望小伙伴們能夠喜歡。
您可能感興趣的文章:
- javascript 通過(guò)封裝div方式彈出div窗體
- javascript 面向?qū)ο笕吕砭氈當(dāng)?shù)據(jù)的封裝
- javascript對(duì)XMLHttpRequest異步請(qǐng)求的面向?qū)ο蠓庋b
- Javascript匿名函數(shù)的一種應(yīng)用 代碼封裝
- 封裝的原生javascript彈出層代碼
- javascript的函數(shù)、創(chuàng)建對(duì)象、封裝、屬性和方法、繼承
- JavaScript 高級(jí)篇之DOM文檔,簡(jiǎn)單封裝及調(diào)用、動(dòng)態(tài)添加、刪除樣式（六）
- Javascript 面向?qū)ο螅ǘ┓庋b代碼
- javascript移動(dòng)設(shè)備Web開(kāi)發(fā)中對(duì)touch事件的封裝實(shí)例
- javascript 面向?qū)ο蠓庋b與繼承
- 自己封裝的常用javascript函數(shù)分享
相關(guān)文章
利用Ext Js生成動(dòng)態(tài)樹(shù)實(shí)例代碼
今天在公司幫同事寫(xiě)了個(gè)用Ext Js生成動(dòng)態(tài)樹(shù)的Demo，在這里分享一下，也好供以后自己查閱。2008-09-09
微信小程序事件點(diǎn)擊跳轉(zhuǎn)頁(yè)面的五種方法小結(jié)
本文主要介紹了微信小程序事件點(diǎn)擊跳轉(zhuǎn)頁(yè)面的五種方法小結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
詳解js的事件處理函數(shù)和動(dòng)態(tài)創(chuàng)建html標(biāo)記方法
本文主要對(duì)javascript的事件處理函數(shù)，動(dòng)態(tài)創(chuàng)建html標(biāo)記的兩種方法進(jìn)行詳細(xì)介紹，具有很好的參考價(jià)值，需要的朋友一起來(lái)看下吧2016-12-12
JavaScript數(shù)據(jù)可視化:ECharts制作地圖
這篇文章主要介紹了Echarts實(shí)現(xiàn)可視化地圖，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-08-08
js利用事件的阻止冒泡實(shí)現(xiàn)點(diǎn)擊空白模態(tài)框的隱藏
點(diǎn)擊彈出某個(gè)框框，但是，有時(shí)候不想操作，就想點(diǎn)擊某個(gè)空白處，隱藏該框框，關(guān)于這一點(diǎn)，下面有個(gè)具體的實(shí)現(xiàn)2014-01-01
JavaScript使用二分查找算法在數(shù)組中查找數(shù)據(jù)的方法
這篇文章主要介紹了JavaScript使用二分查找算法在數(shù)組中查找數(shù)據(jù)的方法,較為詳細(xì)的分析了二分查找法的原理與javascript實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了javascript求日期差的方法,涉及JavaScript日期及字符串操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-03-03
比較詳細(xì)的javascript對(duì)象的property和prototype是什么一種關(guān)系
比較詳細(xì)的javascript對(duì)象的property和prototype是什么一種關(guān)系...2007-08-08
這篇文章主要介紹了JS限制條件補(bǔ)全問(wèn)題,涉及javascript數(shù)組、字符串的遞歸、遍歷、排序及正則操作相關(guān)技巧,需要的朋友可以參考下2016-12-12
這篇文章主要為大家詳細(xì)介紹了原生js模擬購(gòu)物車(chē)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04