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;
}
});

【收藏】8段JQuery处理表单的代码片段,很实用的更多相关文章

  1. spring mvc Controller与jquery Form表单提交代码demo

    1.JSP表单 <% String basePath = request.getScheme() + "://" + request.getServerName() +&qu ...

  2. 使用 纯JQuery 进行 表单 验证

    对于JavaScript而言,进行表单数据的验证可谓是很有必要的,而且一般我们都会在网页上先进行一下表单验证,然后服务器端再次进行验证,来确保用户提交数据的准确性.下面就来分享一个JQuery实现的表 ...

  3. 雷林鹏分享:jQuery EasyUI 表单 - 创建树形下拉框

    jQuery EasyUI 表单 - 创建树形下拉框 树形下拉框(ComboTree)是一个带有下列树形结构(Tree)的下拉框(ComboBox).它可以作为一个表单字段进行使用,可以提交给远程服务 ...

  4. 第一百六十八节,jQuery,表单选择器

    jQuery,表单选择器 学习要点: 1.常规选择器 2.表单选择器 3.表单过滤器 表单作为 HTML 中一种特殊的元素,操作方法较为多样性和特殊性,开发者不但可以 使用之前的常规选择器或过滤器,也 ...

  5. jquery validate表单验证插件-推荐

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

  6. ASP.NET MVC Jquery Validate 表单验证的多种方式

    在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...

  7. jquery validate表单验证插件

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

  8. jQuery Mobile 表单基础

    jQuery Mobile 会自动为 HTML 表单添加优异的便于触控的外观. jQuery Mobile 表单结构 jQuery Mobile 使用 CSS 来设置 HTML 表单元素的样式,以使其 ...

  9. 表单验证代码实例:jquery.validate.js表单验证插件

    jquery.validate.js是JQuery旗下的一个验证插件,借助JQuery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法.使用前请先下载必要的JQuery插件:jq ...

随机推荐

  1. 数据结构与算法(c++)——双缓存队列

    "双缓存队列"是我在一次开发任务中针对特殊场景设计出来的结构.使用场景为:发送端持续向接收端发送数据包--并且不理会接收端是否完成业务逻辑.由于接收端在任何情况下停止响应即可能产生 ...

  2. dedecms_插件

    ../dede/adbaoming.php../dede/baoming_edit.php../dede/templets/baoming_main.htm

  3. 在MAC电脑上抓取iphone数据包的方法

    一.说明: 1.整个抓包操作的过程中,手机必须一直通过USB链接MAC电脑 2.手机系统要求在IOS5以上,因为使用的RVI技术在IOS5以后的系统中才有 3.抓包过程中,手机可以使用任何网络2G.3 ...

  4. Java接口和抽象类的理解

    接口和抽象类的相同之处就是 都会有抽象方法 抽象方法就是一个没有方法体 等待继承的子类完成的方法 然而接口比较严格 它的方法必须是抽象方法且是公开的 抽象类 可以有自己的属性 和 实体方法 首相用面向 ...

  5. ASP.net core 2.0.0 中 asp.net identity 2.0.0 的基本使用(三)—用户账户及cookie配置

    修改用户账户及cookie配置 一.修改密码强度和用户邮箱验证规则: 打开Startup.cs,找到public void ConfigureServices(IServiceCollection s ...

  6. 微信跳一跳的mini辅助设计

    前一段考试没时间写东西,就迟到补发一波,继电器触发触屏,arduino处理数据就行了,B站很多人做,我也来一个,个人测试数据增益为2.1左右,即  延时=距离X2.1x10 void setup() ...

  7. python_如何修改装饰器中参数?

    案例: 为分析程序内哪些函数执行时间开销较大,我们需定义一个带timeout参数的装饰器 需求: 统计被装饰函数的运行时间 时间大于timeout时,将此次函数调用记录到log日志中 运行时可以修改t ...

  8. js 数组与对象的区别

    学习javascript的时候,我曾经一度搞不清楚”数组”(array)和”对象”(object)的根本区别在哪里,两者都可以用来表示数据的集合.   比如有一个数组a=[1,2,3,4],还有一个对 ...

  9. WebSphere--基本特性

    WebSphere应用服务器使您能够为Servlet 的开发实现 "一次写成,各处使用"的目的.该产品包括一个基于 Java 的 Servlet 引擎,独立于 Web 服务器和它所 ...

  10. JAVA中文件与Byte数组相互转换的方法

    JAVA中文件与Byte数组相互转换的方法,如下: public class FileUtil { //将文件转换成Byte数组 public static byte[] getBytesByFile ...