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代码(转)的更多相关文章

  1. 请写出一段表单提交的HTML代码,表单名称为form1,提交方式为post,提交地址为submit.asp

    请写出一段表单提交的HTML代码,表单名称为form1,提交方式为post,提交地址为submit.asp 解答: <form name=”form1” method=”post” action ...

  2. 十五个常用的jquery代码段【转】

    好的文章顶一个 回到顶部按钮 通过使用 jQuery 中的 animate 和 scrollTop 方法,你无需插件便可创建一个简单地回到顶部动画: 1 // Back to top 2 $('a.t ...

  3. 十五个常用的jquery代码段

    十五个常用的jquery代码段 回到顶部按钮 通过使用 jQuery 中的 animate 和 scrollTop 方法,你无需插件便可创建一个简单地回到顶部动画: 1 // Back to top ...

  4. 经验分享:10个简单实用的 jQuery 代码片段

    尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库.今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 您可能感兴趣的相 ...

  5. jQuery 表单验证插件 jQuery Validation Engine 使用

    jQuery 表单验证插件 jQuery Validation Engine 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面),指定使用 jQuery Validation Engi ...

  6. 10个可以直接拿来用的JQuery代码片段

    jQuery里提供了许多创建交互式网站的方法,在开发Web项目时,开发人员应该好好利用jQuery代码,它们不仅能给网站带来各种动画.特效,还会提高网站的用户体验. 本文收集了10段非常实用的jQue ...

  7. 可以直接拿来用的15个jQuery代码片段

    jQuery里提供了许多创建交互式网站的方法,在开发Web项目时,开发人员应该好好利用jQuery代码,它们不仅能给网站带来各种动画.特效,还会提高网站的用户体验. 本文收集了15段非常实用的jQue ...

  8. 10个简单实用的 jQuery 代码片段

    尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库. 今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 1.平滑滚动到 ...

  9. Ajax表单提交插件jquery form

    jQuery Form插件是一个优秀的Ajax表单插件,我们可以非常容易的使用它处理表单控件的值,清空和复位表单控件,附件上传,以及完成Ajax表单提交. jQuery Form有两个核心方法ajax ...

随机推荐

  1. 【状压基础题】poj3254 Corn Fields

    题目大意 :农夫约翰有n*m块地,其中一些地荒掉了.玉米是一种傲娇的植物,种在相邻的地里会导致不孕不育.求所有种法数对100000000求余. 读入:第一行一个n一个m, 接下来是一个n行m列的矩形, ...

  2. 洛谷——P2758 编辑距离

    P2758 编辑距离 题目描述 设A和B是两个字符串.我们要用最少的字符操作次数,将字符串A转换为字符串B.这里所说的字符操作共有三种: 1.删除一个字符: 2.插入一个字符: 3.将一个字符改为另一 ...

  3. 4、Flask实战第4天:自定义url转换器

    url传参可以限定参数的数据类型,例如:限定user_id数据类型为int @app.route('/user/<int:user_id>') def my_list(user_id): ...

  4. [BZOJ 2006] 超级钢琴

    Link: https://www.lydsy.com/JudgeOnline/problem.php?id=2006 Algorithm: 对于此类区间最值类问题,我们可以通过控制一端不变来寻找当前 ...

  5. POJ 3293 Rectilinear polygon(几何基础)

    [题目链接] http://poj.org/problem?id=3293 [题目大意] 给出一些点,每个点只能向外引出一条平行X轴,和Y轴的边, 问能否构成一个闭多边形,如果能,返回多边形的总边长, ...

  6. 【基数排序】bzoj1901 Zju2112 Dynamic Rankings

    论NOIP级别的n²算法…… 跟分块比起来,理论上十万的数据只慢4.5倍左右的样子…… #include<cstdio> #include<algorithm> using n ...

  7. 【树链剖分(区间线段树)】BZOJ4196-[NOI2015]软件包管理

    [题目大意] 如果软件包A依赖软件包B,那么安装软件包A以前,必须先安装软件包B.同时,如果想要卸载软件包B,则必须卸载软件包A.而且,由于你之前的工作,除0号软件包以外,在你的管理器当中的软件包都会 ...

  8. NOIP模拟赛[补档]

    图论: 差分约束, 2 SAT 数据结构 字符串 数学: FFT / NTT / 线代 DP 计算几何 暴力 线性基 CF 724G 计划: D1 T1: 斜率优化DP D1 T2: 差分约束 D1 ...

  9. TOleDBMSSQLConnectionProperties驱动MSSQL数据库

    TOleDBMSSQLConnectionProperties驱动MSSQL数据库 为了让MORMOT可以驱动所有版本的MSSQL,需要改用SQLOLEDB,因为所有的WINDOWS操作系统里面都提供 ...

  10. [Git] Git把Tag推送到远程仓库

    转载: http://blog.csdn.net/hustpzb/article/details/8056518 用git tag来给工程打上标签,但是这个命令只是在本地仓库打标签而已, 为了能把标签 ...