2019独角兽企业重金招聘Python工程师标准>>>

简单列举了几段JQuery表单处理的代码片段,包括只能输入数字的文本域、checkbox全选、checkbox反选、输入字符数量提示、Email验证、避免重复提交等。所有代码均经过测试验证,记得要收藏啊。

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验证、避免重复提交等。所有代码均经过测试验证,记得要收藏啊。

转载于:https://my.oschina.net/ChinaKingM/blog/913664

几段表单处理的JQuery代码相关推荐

  1. html form通过ajax提交表单提交数据,Jquery通过Ajax方式来提交Form表单的具体实现

    今天刚好看到Jquery的ajax提交数据到服务器的方法,原文是: 保存数据到服务器,成功时显示信息. jQuery 代码: $.ajax({ type: "POST", url: ...

  2. JavaScript(四)——面向对象编程、BOM、DOM、表单验证、jQuery

    文章目录 1. 面向对象编程 2. 操作BOM对象(重点) 3. 操作DOM对象(重点) 4. 操作表单(验证) 5. jQuery 1. 面向对象编程 (1) 原型对象 javascript.Jav ...

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

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

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

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

  5. jQuery框架学习第十一天:实战jQuery表单验证及jQuery自动完成提示插件

    jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集  jQuery框架学习第四天:使用jQ ...

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

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

  7. 127.0.0.1 zxt.php_php单文件版在线代码编辑器使用方法

    这篇文章主要介绍了php单文件版在线代码编辑器,个人感觉相当不错,分享给大家,需要的朋友可以参考下 密码加密方式: * md5(自设密码+$ace) //$ace为cdn镜像地址 使用方法: * 1. ...

  8. jquery代码实现可输入多关键字搜索下拉框

    参考网站:https://www.edoou.com/articles/1552378028436732 https://blog.csdn.net/xuxiaoyinliu/article/deta ...

  9. 编写高效的jQuery代码

    编写高效的jQuery代码 最近写了很多的js,虽然效果都实现了,但是总感觉自己写的js在性能上还能有很大的提升.本文我计划总结一些网上找的和我本人的一些建议,来提升你的jQuery和javascri ...

最新文章

  1. 力扣(LeetCode)刷题,简单+中等题(第35期)
  2. AI一分钟 | 马斯克再放豪言:我要造的AI的芯片“全球最棒”;刚上路就被叫停,可能是美国对快递机器人最严厉的打击
  3. string_view理解与用法(二)
  4. 面对万物互联的智能世界,你是否也想分一杯羹
  5. GNU C 、ANSI C、标准C、标准c++区别和联系
  6. HTML+CSS+JS实现 ❤️制作loading动画效果❤️
  7. java压缩传输_简单实现字符串的压缩,减轻传输压力
  8. 绘制几何图形——使用android.graphics类 onDraw
  9. Mysql简单的存储过程怎么写
  10. 数据结构与算法分析:C语言描述(原书第2版) PDF
  11. kettle各组件说明
  12. 微信公众号自定义分享注意事项
  13. 基于CSS mask和clip-path实现切角的技巧
  14. git clone项目文件时报错解决remote: Enumerating objects: 19, done. remote: Counting objects: 100% (19/19), don
  15. 《数据结构》实验——顺序结构与链表
  16. 怎么快速复制文件、转移文件到同一新文件夹中
  17. 圣路易斯大学计算机科学专业,圣路易斯华盛顿大学计算机科学研究生专业排名最新...
  18. Google Voice 保留号码
  19. X战警 和 猩球崛起3
  20. SQL SERVER 2005安装:此计算机存在相同实例名解决办法

热门文章

  1. 移动硬盘安装Windows7
  2. 基于DotNet构件技术的企业级敏捷软件开发平台 - AgileEAS.NET - 对象控制反转
  3. js+获取当前域名及跳转、下载操作
  4. 记录docker-Skywalking集成es7异常处理
  5. 目标检测如何计算召回率_计算机视觉目标检测的框架与过程
  6. mysql 从库 问题_一篇文章帮你解决Mysql 中主从库不同步的问题
  7. centos系统云服务器,Centos系统怎么进云服务器
  8. 多次点击android版本出现棒棒糖,android – 为前棒棒糖设备创建循环显示
  9. wps for linux alpha 15 语言包,WPS Office for Linux Alpah 7发布
  10. MySQL后初次密码_mysql第一次安装成功后初始化密码操作步骤