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验证、避免重复提交等。所有代码均经过测试验证,记得要收藏啊。