关于检测输入正误的提示的研究

检测输入的的方法有

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

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