摘要:本文简单列举了几段jQuery表单处理的代码片段,包括只能输入数字的文本域、checkbox全选、checkbox反选、输入字符数量提示、Email验证、避免重复提交等。希望阅读本篇文章以后大家有所收获,帮助大家对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相关知识,请关注职坐标WEB前端jQuery频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号