- 浏览: 7861544 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (2425)
- 软件工程 (75)
- JAVA相关 (662)
- ajax/web相关 (351)
- 数据库相关/oracle (218)
- PHP (147)
- UNIX/LINUX/FREEBSD/solaris (118)
- 音乐探讨 (1)
- 闲话 (11)
- 网络安全等 (21)
- .NET (153)
- ROR和GOG (10)
- [网站分类]4.其他技术区 (181)
- 算法等 (7)
- [随笔分类]SOA (8)
- 收藏区 (71)
- 金融证券 (4)
- [网站分类]5.企业信息化 (3)
- c&c++学习 (1)
- 读书区 (11)
- 其它 (10)
- 收藏夹 (1)
- 设计模式 (1)
- FLEX (14)
- Android (98)
- 软件工程心理学系列 (4)
- HTML5 (6)
- C/C++ (0)
- 数据结构 (0)
- 书评 (3)
- python (17)
- NOSQL (10)
- MYSQL (85)
- java之各类测试 (18)
- nodejs (1)
- JAVA (1)
- neo4j (3)
- VUE (4)
- docker相关 (1)
最新评论
-
xiaobadi:
jacky~~~~~~~~~
推荐两个不错的mybatis GUI生成工具 -
masuweng:
(转)JAVA获得机器码的实现 -
albert0707:
有些扩展名为null
java 7中可以判断文件的contenttype了 -
albert0707:
非常感谢!!!!!!!!!
java 7中可以判断文件的contenttype了 -
zhangle:
https://zhuban.me竹板共享 - 高效便捷的文档 ...
一个不错的网络白板工具
在一个比如表单验证的过程中,有时候,假如要用户一定要输入某个字段,否则不给输入
其他字段,即屏蔽其他字段的输入,这个时候依然可以用jquery可以做到,例子如下:
1 假如页面有三个字段,用户名和密码和密码确认三个字段:
<form>
<div>
<span class="label">User Name </span>
<input type="text" class="username" name="username"/>
<span class="error"> User name cannot be blank</span>
</div>
<div>
<span class="label">Password </span>
<input type="password" class="password" name="password" />
<span class="error"> Password cannot be blank</span>
</div>
<div>
<span class="label">Confirm Password </span>
<input type="password" class="confpass" name="confpass" />
<span class="error"> Password and Confirm Password don't match</span>
</div>
</form>
2 jquery中的脚本设置
原理其实很简单,比如这里,在每个文本框的onblur事件中进行判断,先看用户框
中的是否输入和长度是否匹配,如果不符合要求的话,则$('.username').next().show();
这句,其实是显示下一个元素(即出错信息提示,即<span class="error"> User name cannot be blank</span>
)
并且同时$('.password').attr('disabled',true);
$('.confpass').attr('disabled',true);
将其他字段的disabled属性设置为TRUE即可.
当然,要是输入了的话,也要重新设置回来,道理就这么简单了
其他字段,即屏蔽其他字段的输入,这个时候依然可以用jquery可以做到,例子如下:
1 假如页面有三个字段,用户名和密码和密码确认三个字段:
<form>
<div>
<span class="label">User Name </span>
<input type="text" class="username" name="username"/>
<span class="error"> User name cannot be blank</span>
</div>
<div>
<span class="label">Password </span>
<input type="password" class="password" name="password" />
<span class="error"> Password cannot be blank</span>
</div>
<div>
<span class="label">Confirm Password </span>
<input type="password" class="confpass" name="confpass" />
<span class="error"> Password and Confirm Password don't match</span>
</div>
</form>
2 jquery中的脚本设置
$(document).ready(function() { $('.error').hide(); $('.username').blur(function(){ data=$('.username').val(); var len=data.length; if(len<1) { $('.username').next().show(); $('.password').attr('disabled',true); $('.confpass').attr('disabled',true); } else { $('.username').next().hide(); $('.password').removeAttr('disabled'); $('.confpass').removeAttr('disabled'); } }); $('.password').blur(function(){ data=$('.password').val(); var len=data.length; if(len<1) { $('.password').next().show(); $('.confpass').attr('disabled',true); } else { $('.password').next().hide(); $('.confpass').removeAttr('disabled'); } }); $('.confpass').blur(function(){ if($('.password').val() !=$('.confpass').val()) { $('.confpass').next().show(); } else { $('.confpass').next().hide(); } }); });
原理其实很简单,比如这里,在每个文本框的onblur事件中进行判断,先看用户框
中的是否输入和长度是否匹配,如果不符合要求的话,则$('.username').next().show();
这句,其实是显示下一个元素(即出错信息提示,即<span class="error"> User name cannot be blank</span>
)
并且同时$('.password').attr('disabled',true);
$('.confpass').attr('disabled',true);
将其他字段的disabled属性设置为TRUE即可.
当然,要是输入了的话,也要重新设置回来,道理就这么简单了
发表评论
-
微信开发工具中时间问题的小坑
2018-02-07 19:07 765刚开始用微信小程序开发工具,每次运行任何应用,都报这个错误: ... -
三篇不错的介绍CSS GRID的文章
2017-12-06 09:08 484三篇不错的介绍CSS GRID的文章: http://www. ... -
双因素认证(2FA)教程
2017-11-03 09:16 1482http://www.ruanyifeng.com/blog/ ... -
es6 中的export
2017-08-20 08:00 776https://juejin.im/post/5998625f ... -
markdown中的空格
2017-08-20 07:53 1658即使手动输入空格, 也是很不推荐的方法。我推荐全角空格,切换 ... -
(转)讲真,别再使用JWT了
2017-08-17 23:21 968不错的好文: http://insights.thoughtw ... -
(转)手把手教你WebStorm+chrome实现时时调试刷新
2017-08-15 10:50 2982参考: http://jingyan.baidu.com/ar ... -
IntelliJ Idea 2017 免费激活方法
2017-08-15 09:38 92711. 到网站 http://idea.lanyus.com/ ... -
前端框架这么多,该何去何从?
2017-08-04 07:17 608http://insights.thoughtworkers. ... -
记录一个HTML 5画拓扑图的商业公司
2017-07-18 19:56 814http://qunee.com/ DEMO:http:// ... -
vue 2例子学习收集
2017-07-16 11:46 9571 vue2.0手撸闲鱼App https://githu ... -
(收藏)虚拟DOM内部是如何工作的
2017-07-13 22:08 556虚拟DOM内部是如何工作的 https://segmentfa ... -
最近看到的几篇精彩JAVASCRIPT博客文章推荐
2017-07-11 07:10 529【深度长文】JavaScript数组所有API全解密 http ... -
jsonp 跨域原理:深入浅出 jsonp
2017-07-10 19:55 1389https://lzw.me/a/jsonp.html jso ... -
(转)深度长文-JavaScript数组所有API全解密
2017-07-08 19:59 782深度长文-JavaScript数组所有API全解密 http: ... -
(收藏)网页导出PDF的方案
2017-07-06 07:13 913(收藏)网页导出PDF的方案 https://yiqiwuli ... -
Chromium 新的弹窗机制以及 HTML 的 <dialog> 元素
2017-06-28 12:37 1116https://juejin.im/post/59525195 ... -
国内一个不错的大屏UI设计厂家
2017-06-03 19:43 3124http://www.lanlanwork.com/dp.ph ... -
canvas仿芝麻信用分仪表盘
2017-05-28 20:21 1529canvas仿芝麻信用分仪表盘 https://segment ... -
(转)CSS 变量教程
2017-05-10 21:12 532http://www.ruanyifeng.com/blog/ ...
相关推荐
本文分享了jQuery实现限制文本框的输入长度的示例代码,具有一定的参考价值,下面跟着小编一起来看下吧
一个jQuery插件,用于将文本字段的输入限制为数字,逗号和小数位 安装 在您的项目中包含文件inputLimit.js < script src =" /js/inputLimit.js " > </ script > 用法 $ ( '.js-inputlimit' ) . ...
一个插件,用于限制文本字段的输入,并允许用户轻松地以指定的模式输入数据。 一些示例模式包括电话号码,日期,社会保险等。这是预定义掩码及其代表的集合: X-代表字母字符(AZ,az) 9-代表数字字符(0-9) ...
jquery.rangeinput jQuery插件,用于为输入字段指定最小值和最大值,并带有在每个范围限制处启用/禁用的按钮列表。属性属性“ data-min”和“ data-max”是必需的。 属性“ data-msg”是可选的,并且仅在传递了选项...
combobox:添加“limitToList”属性来限制只能输入在列表项中的内容; combogrid:允许用户快速克隆组件; form:添加“dirty”属性,允许用户只发送变更的字段内容; form:添加“resetDirty”方法; datagrid...
您应该可以输入不带前导0的小数。(即.45) 例子 var myInputField = document.getElementById('decimals-only'); var digitsFormat = "00.00" new DecimalInputManipulator(myInputField, digitsFormat); @param ...
jQuery editTable是一个非常小的jQuery插件(〜1Kb gzip压缩),填补了缺少数据表默认输入字段所留下的空白。 jQuery editTable可以在ajax和/或HTTP POST竞赛中使用,让您预设标题和列数,或者让用户完全自由。 您...
TextCounter是一个jQuery插件,可在输入字段中提供文本倒计时。 受Twitter推算推文中剩余字符的方式启发,textCounter是一个可配置的jQuery插件,可以轻松地使任何人添加相同的功能。 考虑到最佳实践,textCounter...
jQuery-Plugins-CharsRemainingLimiter 限制可以输入到 TEXTAREA / INPUT 字段的字符数并提供“剩余字符数”反馈
有效一个 jQuery 插件,用于对表单字段和 HTML 元素进行有效输入作者主页: :如何使用它? 只需将其添加到您的 html 中 $(document).ready(function() {$('#test').jValid({regex:'0-0000-0000'});});这个插件有选项...
1.1 jQuery能做什么 1.2 jQuery为什么如此出色 1.3 第一个jQuery文档 1.3.1 下载jQuery 1.3.2 设置HTML文档 1.3.3 编写jQuery代码 1.4 小结 第2章 选择符——取得你想要的一切...
前端项目-jquery.alphanum,限制可以输入文本字段的字符。支持字母数字、字母或数字。使用方便。完全可定制。跨浏览器兼容。
可操作的最大长度插件限制Handsontable插件的任何单元格的最大长度。 关于Handsontable版本0.19.0的最新测试。用法: new Handsontable ( container , {( ... )cells : function ( row , col , prop ) { this . ...
例如,您可以使输入像信用卡字段一样(具有数字格式和长度限制): Payment . formatCardNumber ( document . querySelector ( 'input.cc-num' ) ) ; 然后,在提交付款表格后,您可以在客户端验证卡号: var ...
牵线木偶文本框行为 描述 此行为在视图的 DOM <input>文本元素与模型属性的值... 特此授予任何人免费获得本软件副本和相关文档文件(“软件”)的许可,不受限制地处理本软件,包括但不限于使用、复制、修改、合
1.1 jQuery能做什么 1.2 jQuery为什么如此出色 1.3 jQuery项目历史 1.4 第一个jQuery驱动的页面 1.4.1 下载jQuery 1.4.2 建立HTML文档 1.4.3 编写jQuery代码 1.4.4 最终结果 1.5 小结 第2章 选择符 2.1 ...
不良词检测器该超轻量级插件旨在用于用户输入字段,以检测不良单词,进行回调或使这些单词静音。 这是工作示例: 相依性这个插件是用本机JS代码编写的,因此它没有任何依赖关系(甚至jquery都没有)快速开始包括脚本...
这是发布到公共领域的免费且不受限制的软件。 任何人都可以自由地以源代码形式或编译后的二进制形式出于任何商业或非商业目的,以任何方式复制,修改,发布,使用,编译,出售或分发此软件。 在承认版权法的司法...