2019獨角獸企業重金招聘Python工程師標準>>>

簡單列舉了幾段JQuery表單處理的代碼片段，包括只能輸入數字的文本域、checkbox全選、checkbox反選、輸入字符數量提示、Email驗證、避免重復提交等。所有代碼均經過測試驗證，記得要收藏啊。

1 只接受數字輸入

$("#uAge").keydown(function(event) {// 允許退格和刪除鍵if ( event.keyCode == 46 || event.keyCode == 8 ) {}else {// 保證輸入的是數字鍵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 單選框標簽表示

//css，隱藏radio圓形，用label表示 //實際使用中，樣式寫的好看一些 .sex input { display: none; } .selected { background: red; } //javascript $("input:radio").click(function () {$("input:radio").parent("label").removeClass("selected");$(this).parent("label").addClass("selected"); })

5 還可輸入多少字符提示

//第一個參數：總字符數 //第二個參數：還可輸入多少顯示區對象 $.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驗證

$.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 避免重復提交

$('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表單處理的代碼片段，包括只能輸入數字的文本域、checkbox全選、checkbox反選、輸入字符數量提示、Email驗證、避免重復提交等。所有代碼均經過測試驗證，記得要收藏啊。

轉載于:https://my.oschina.net/ChinaKingM/blog/913664

總結

以上是生活随笔為你收集整理的几段表单处理的JQuery代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。