关于检测输入正误的提示的研究
来源:互联网 发布:linux 卸载u盘 编辑:程序博客网 时间:2024/04/30 13:32
检测输入的的方法有
blur 失焦时触发
change 失焦时触发
keyup 按键弹起时触发
三种方法都不完美。
我的代码是
$('.password,.phone-number').change(function() {//或blur,keyup var tel = $('.phone-number').val(); if(/^1\d{10}$/g.test (tel)) { $('.login-button').attr('disabled', false); $('.login-button').removeClass('button-active'); } else if (tel =='') { $('.login-button').attr('disabled', true); $('.login-button').addClass('button-active'); } else{ $('.wrong-number').show(); $('.login-button').attr('disabled', true); $('.login-button').addClass('button-active'); }});
$('.phone-number').focus(function() { $('.wrong-number').hide(); }) ;$('.password').focus(function() { $('.wrong-psw').hide();}) ;
$('.login-button').on('click',function(e) { console.log('post');。。。。});
change的缺点:
1,当input输入完毕直接点击登录的button时,此时input并未失焦,无法触发change事件导致没有对最新的输入内容做判断。在前一次输入错误而这一次输入正确的情况下,还保持输入错误的判断,button不可用。
2,当第一次输入错误第二次输入实际上并未做修改时,仍然不能触发判断,而错误提示文字在focus时会清空,最后导致本次操作只是清除了错误提示实际上按钮还是不可用,会误导用户。
blur的缺点:
同change的第一条。
详细研究这一条:
一,当原来输入错误,修改正确后直接点击button。button保留错误时的不可用状态,导致正确信息无法post。
解决方法:1,人为的失焦一下再点登陆。也就是点一下别的地方先,2,或者加一条keyup判断只在手机号填写正确时及时清除之前判断为错误的结果。
二,当原来输入正确,修改为错误手机号(此篇的手机号错误统一为格式错误),点击button意外被拦截:button的click执行了但是click里的函数未执行,blur中的错误提示有执行,随后button变为不可用状态,红色提示文字出现。
如图:(点击了一下变成不可用,登录函数内容未执行)
解决方法:由于被拦截了看似不用多点一下制造失焦,提示文字在这种情况下正常出现。但是click中的函数未执行的原因不明(难道是click实际上也没有执行而blur执行了,看到的点击只是css样式的hover和active效果?但这与第一种情况矛盾:input未失焦时点击button,blur未执行),保险起见在keyup里控制button的可用/不可用状态,这样做的瑕疵是按钮可以正常反馈而没有文字提示。
keyup的缺点:
keyup没有上面两种问题,但是在输入过程中错误的提示会一直在直到输入完毕。体验不好。比如手机号码为18811112222,那么输入第一个数字开始就会报错。
解决方法:
长度不足11位不判断,但是这样会放过长度错误的输入。所以需要结合blur判断 tel.length < 11 和 tel.length > 11 的情况。也就是blur的第一种情况的第二个解决方法。
综上:
keyup+blur组合
keyup可以及时判断button是否可用,blur控制提示文字何时出现。
$('.password,.phone-number').blur(function() { var tel = $('.phone-number').val(); console.log('xxx'); if(/^1\d{10}$/g.test (tel)) { $('.login-button').attr('disabled', false); $('.login-button').removeClass('button-active'); } else if (tel =='') { $('.login-button').attr('disabled', true); $('.login-button').addClass('button-active'); } else{ $('.wrong-number').show(); $('.login-button').attr('disabled', true); $('.login-button').addClass('button-active'); }});$('.password,.phone-number').keyup(function() { var tel = $('.phone-number').val(); if(/^1\d{10}$/g.test (tel)) { $('.login-button').attr('disabled', false); $('.login-button').removeClass('button-active'); }else{ $('.login-button').attr('disabled', true); $('.login-button').addClass('button-active'); }});
- 关于检测输入正误的提示的研究
- 汇编语言的艺术(组合语言的艺术):观念正误
- 关于输入合法性检测和闰年的判断的想法
- 关于笔记本每次开机都会提示硬盘检测的解决方案
- 输入提示的实现
- 前景检测方面的研究
- "半连接"检测的研究
- 测试使用jq的无alert检测提示form输入内容错误信息方法
- 格式化输入的小研究
- 关于FoxMail的研究
- 关于Len()的研究
- 关于foxmail的研究
- 关于GIS的研究
- 关于UndoInternal的研究
- 关于探针的研究
- 关于XML的研究
- 关于doom的研究
- 关于进度条的研究
- 现场六大问题分析与对策
- java.lang.NoSuchMethodError: java.util.concurrent.ConcurrentHashMap.keySet()Ljava/util/concurrent/Co
- 支付宝红包稳定性实践与思考--讲座思考
- [cqoi2015]选数 解题报告
- GooglePlay内购In-app Billing 总结~
- 关于检测输入正误的提示的研究
- 各种浏览器全屏模式的方法、属性和事件介绍(转)
- Linux 开发工具学习(gcc 、gdb和makefile)
- 二分图的判断 bfs+dfs两种搜索方法判断
- NASM/MASM
- 怎么查看oracle数据库数据量大小?
- javaScript日期对象格式化
- MFC CStatic 透明重绘 使用双缓冲
- IOS开发 - 网络总结(二)