首页 > 代码库 > 几段表单处理的JQuery代码（转）
几段表单处理的JQuery代码（转）
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验证、避免重复提交等。所有代码均经过测试验证，记得要收藏啊。
几段表单处理的JQuery代码（转）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。