检测输入的的方法有
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'); } });