資訊專欄INFORMATION COLUMN
1 只接受數(shù)字輸入
$("#uAge").keydown(function(event) {
// 允許退格和刪除鍵
if ( event.keyCode == 46 || event.keyCode == 8 ) {
}
else {
// 保證輸入的是數(shù)字鍵
if (event.keyCode < 48 || event.keyCode > 57 ) {
event.preventDefault();
}
}
});
2 全選
$("#checkall").click(function() {
//固有屬性使用prop，切記
$("#myForm input:checkbox").prop("checked",true);
});
3 反選
$("#inverse").click(function() {
$("#myForm input:checkbox").each(function () {
$(this).prop("checked",!$(this).prop("checked"))
})
});
4 單選框標(biāo)簽表示
//css，隱藏radio圓形，用label表示
//實(shí)際使用中，樣式寫的好看一些
.sex input { display: none; }
.selected { background: red; }
//javascript
$("input:radio").click(function () {
$("input:radio").parent("label").removeClass("selected");
$(this).parent("label").addClass("selected");
})
5 還可輸入多少字符提示
//第一個(gè)參數(shù)：總字符數(shù)
//第二個(gè)參數(shù)：還可輸入多少顯示區(qū)對(duì)象
$.fn.limiter = function (limit, elem) {
$(this).on("keyup focus", function () {
setCount(this, elem);
});
function setCount(src, elem) {
var chars = src.value.length;
if (chars > limit) {
src.value = src.value.substr(0, limit);
chars = limit;
}
elem.html(limit - chars);
}
setCount($(this)[0], elem);
}
$("#title").limiter(3,$("#limit"));
6 輸入域顯示缺省值
$(".default").each(function() {
var $this = $(this);
var defaultVal = $this.attr("title");
if($this.val().length ==0) {
$this.val(defaultVal);
}
$this.focus(function() {
if ($this.val() === defaultVal) {
$this.val("");
}
});
$this.blur(function() {
if ($this.val().length === 0) {
$this.val(defaultVal);
}
});
});
7 Email驗(yàn)證
$.fn.validateEmail = function () {
var $this = $(this);
$this.change(function () {
var reg = /^([A-Za-z0-9_-.])+@([A-Za-z0-9_-.])+.([A-Za-z]{2,4})$/;
if ($this.val() == "") {
$this.removeClass("badEmail").removeClass("goodEmail")
} else if (reg.test($this.val()) == false) {
$this.removeClass("goodEmail");
$this.addClass("badEmail");
} else {
$this.removeClass("badEmail");
$this.addClass("goodEmail");
}
});
};
8 避免重復(fù)提交
$("form").submit(function() {
if(typeof jQuery.data(this, "disabledOnSubmit") == "undefined") {
jQuery.data(this, "disabledOnSubmit", { submited: true });
$("input[type=submit], input[type=button]", this).each(function() {
$(this).attr("disabled", "disabled");
});
return true;
}
else
{
return false;
}
});
簡單列舉了幾段JQuery表單處理的代碼片段，包括只能輸入數(shù)字的文本域、checkbox全選、checkbox反選、輸入字符數(shù)量提示、Email驗(yàn)證、避免重復(fù)提交等。所有代碼均經(jīng)過測試驗(yàn)證，記得要收藏啊。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/83115.html
摘要：元素屏幕居中獲取頁面路徑相關(guān)參數(shù)值值值值刪除內(nèi)聯(lián)樣式長度限制并截取外鏈新窗口打開測試與其它庫沖突情況測試沖突代碼避免沖突加載即使掉線加載遮罩層，點(diǎn)擊移除元素固頂注意調(diào)整邊界值禁止右鍵菜單對(duì)象插件模版代碼公有方法私有方法延伸閱讀處理表單的 1 元素屏幕居中 jQuery.fn.center = function () { this.css(position,absolute); ...
摘要：發(fā)布應(yīng)用市場的平臺(tái)搶紅包工具紅包精靈開源啦掘金紅包精靈，如果喜歡，點(diǎn)個(gè)開源不易。作者將原素材文章進(jìn)行了新內(nèi)容的添加和重新排列，但是因?yàn)槲恼赂咝У拇a編寫技巧總結(jié)前端掘金本文總結(jié)了代碼編寫技巧，來提升你的和代碼。 收藏安卓開發(fā)中非常實(shí)用優(yōu)秀的庫! 有圖有真相! - Android - 掘金本來是打算收藏工具類的,但轉(zhuǎn)念一想,已經(jīng)有這么多優(yōu)秀的庫了,就沒必要再去重復(fù)造輪子了,便歸納工作中比...
摘要：一個(gè)專注于瀏覽器端和兼容的包管理器。一個(gè)整合和的最佳思想，使開發(fā)者能快速方便地組織和編寫前端代碼的下一代包管理器。完全插件化的工具，能在中識(shí)別和記錄模式。健壯的優(yōu)雅且功能豐富的模板引擎。完整的經(jīng)過充分測試和記錄數(shù)據(jù)結(jié)構(gòu)的庫。 【導(dǎo)讀】：GitHub 上有一個(gè) Awesome – XXX 系列的資源整理。awesome-javascript 是 sorrycc 發(fā)起維護(hù)的 JS 資源列表...
摘要：更好的方案模板分離原則模板分離原則將定義模板的那一部分，與的代碼邏輯分離開來，讓代碼更加優(yōu)雅且利于維護(hù)。 showImg(https://segmentfault.com/img/bVJ73t?w=800&h=316); 引言 在前端開發(fā)中，經(jīng)常需要?jiǎng)討B(tài)添加一些元素到頁面上。那么如何通過一些技巧，優(yōu)化動(dòng)態(tài)創(chuàng)建頁面元素的方式，使得代碼更加優(yōu)雅，并且更易于維護(hù)呢？接下來我們通過研究一些實(shí)例...
摘要：更好的方案模板分離原則模板分離原則將定義模板的那一部分，與的代碼邏輯分離開來，讓代碼更加優(yōu)雅且利于維護(hù)。 showImg(https://segmentfault.com/img/bVJ73t?w=800&h=316); 引言 在前端開發(fā)中，經(jīng)常需要?jiǎng)討B(tài)添加一些元素到頁面上。那么如何通過一些技巧，優(yōu)化動(dòng)態(tài)創(chuàng)建頁面元素的方式，使得代碼更加優(yōu)雅，并且更易于維護(hù)呢？接下來我們通過研究一些實(shí)例...
閱讀 2937·2021-10-19 10:09
閱讀 3157·2021-10-09 09:41
閱讀 3413·2021-09-26 09:47
閱讀 2729·2019-08-30 15:56
閱讀 618·2019-08-29 17:04
閱讀 1011·2019-08-26 11:58
閱讀 2527·2019-08-26 11:51
閱讀 3387·2019-08-26 11:29
