几段表单处理的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代码(转)的更多相关文章
- 请写出一段表单提交的HTML代码,表单名称为form1,提交方式为post,提交地址为submit.asp
请写出一段表单提交的HTML代码,表单名称为form1,提交方式为post,提交地址为submit.asp 解答: <form name=”form1” method=”post” action ...
- 十五个常用的jquery代码段【转】
好的文章顶一个 回到顶部按钮 通过使用 jQuery 中的 animate 和 scrollTop 方法,你无需插件便可创建一个简单地回到顶部动画: 1 // Back to top 2 $('a.t ...
- 十五个常用的jquery代码段
十五个常用的jquery代码段 回到顶部按钮 通过使用 jQuery 中的 animate 和 scrollTop 方法,你无需插件便可创建一个简单地回到顶部动画: 1 // Back to top ...
- 经验分享:10个简单实用的 jQuery 代码片段
尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库.今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 您可能感兴趣的相 ...
- jQuery 表单验证插件 jQuery Validation Engine 使用
jQuery 表单验证插件 jQuery Validation Engine 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面),指定使用 jQuery Validation Engi ...
- 10个可以直接拿来用的JQuery代码片段
jQuery里提供了许多创建交互式网站的方法,在开发Web项目时,开发人员应该好好利用jQuery代码,它们不仅能给网站带来各种动画.特效,还会提高网站的用户体验. 本文收集了10段非常实用的jQue ...
- 可以直接拿来用的15个jQuery代码片段
jQuery里提供了许多创建交互式网站的方法,在开发Web项目时,开发人员应该好好利用jQuery代码,它们不仅能给网站带来各种动画.特效,还会提高网站的用户体验. 本文收集了15段非常实用的jQue ...
- 10个简单实用的 jQuery 代码片段
尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库. 今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 1.平滑滚动到 ...
- Ajax表单提交插件jquery form
jQuery Form插件是一个优秀的Ajax表单插件,我们可以非常容易的使用它处理表单控件的值,清空和复位表单控件,附件上传,以及完成Ajax表单提交. jQuery Form有两个核心方法ajax ...
随机推荐
- Milk Pails(BFS)
Milk Pails 时间限制: 1 Sec 内存限制: 64 MB提交: 16 解决: 4[提交][状态][讨论版] 题目描述 Farmer John has received an order ...
- luogu P1325 雷达安装
题目描述 描述: 假设海岸线是一条无限延伸的直线.它的一侧是陆地,另一侧是海洋.每一座小岛是在海面上的一个点.雷达必须安装在陆地上(包括海岸线),并且每个雷达都有相同的扫描范围d.你的任务是建立尽量少 ...
- UVA 10160 Servicing Stations(状态压缩+迭代加深)
[题目链接] LInk [题目大意] 给出一些点和边,选择一个点就能把这个点和相邻的点都覆盖,求最小点覆盖 [题解] 我们压缩点被覆盖的状态,迭代加深搜索覆盖的最小点数, 当剩余的点全部选上时都无法完 ...
- 【递推】【卡特兰数】CODEVS 3134 Circle
新GET了一种卡特兰数的应用…… 在一个圆上,有2*K个不同的结点,我们以这些点为端点,连K条线段,使得每个结点都恰好用一次.在满足这些线段将圆分成最少部分的前提下,请计算有多少种连线的方法. 不会证 ...
- 【分块】【常数优化】【Orz faebdc】洛谷 P1083 NOIP2012提高组 借教室
分块90分. By AutSky_JadeK [重点在下面] #include<cstdio> #include<cmath> using namespace std; #de ...
- Java高级架构师(一)第03节:多模块多Web应用合并War包
多模块.多Web应用合并war包 在日常的系统开发中,如果担心各个系统的资源同名覆盖,可以在总的War模块下放置一份最终的资源. 将版本号改成9.1.0.v20131115,ok 在Idea中的Mav ...
- 51单片机软件I2C驱动中的CY
做一个MSP430的项目,虽然430内部有硬件I2C的模块,略难,准备直接移植51的..碰到一句代码 dat <<= 1; //移出数据的最高位 pSDA = CY; //送数据口 dig ...
- XAMPP安装与多虚拟目录地址设置
前端开发集成环境-XAMPP 在前端开发中,经常需要进行请求的调试等都需要一个服务器环境,这时类似wamp.XAMPP就是我们最后的选择,集成apache.php.mysql等一应俱全,不需要去单独配 ...
- 三星s3c24xx平台GPIO操作详解
转:http://blog.chinaunix.net/uid-22030783-id-3391515.html 先介绍三星S3C24XX平台BSP中定义外设寄存器和GPIO的相关头文件 以linux ...
- 在java中如何在非servlet的普通类中获取request、response、session
原文:http://blog.csdn.net/u012255097/article/details/53092628 在spring的普通类中: HttpServletRequest request ...