iOS优化登陆注册界面的用户体验用例

先看下初步优化过的效果

12323.gif

优化的几个方面：

1. 校验是否是手机号

 - (BOOL)isValidateMobile:(NSString *)mobile
{
    NSString *phoneRegex = @"^[1][3,4,5,8,7][0-9]{9}$";
    NSPredicate *phoneTest = [NSPredicate predicateWithFormat:@"SELF MATCHES %@", phoneRegex];
    return [phoneTest evaluateWithObject:mobile];
}

2. 校验完成手机号后光标移动到密码输入框
   3.密码输入框密文、长显示叉号
   4.监听三个输入框，只有全部合法才激活登陆按钮的点击方法和显示方式
   部分关键代码：
   注：这里全部使用的是xib拖出来的界面，使用的是KVC

    [_phone addTarget:self action:@selector(changePhone) forControlEvents:UIControlEventEditingChanged];
    [_password addTarget:self action:@selector(changeAction) forControlEvents:UIControlEventEditingChanged];
    [_email addTarget:self action:@selector(changeAction) forControlEvents:UIControlEventEditingChanged];
    [_loginButton setEnabled:NO];
    [_loginButton addTarget:self action:@selector(loginButtonAction) forControlEvents:UIControlEventTouchUpInside];

实现方法：

1. 手机号输入的监听事件

  - (void)changePhone {
    if (_phone.text.length >= 11) {
        if ([self isValidateMobile:_phone.text]) {
            _phone.textColor = [UIColor blackColor];
            [_password becomeFirstResponder];
        } else {
            _phone.textColor = [UIColor redColor];
        }
    } else {
        _phone.textColor = [UIColor blackColor];
    }
}

剩余两个textfield监听事件实现

- (void)changeAction {
         if ((_password.text.length >= 1 && _phone.text.length >=     11 && _email.text.length >= 1) && [self isValidateMobile:_phone.text]) {

        // 这里注意一般使用 enable 而不使用userInteractionEnabled  延展中重写setEnabled方法，来实现可否点击按钮的效果
            [_loginButton setEnabled:YES];
    } else {
        [_loginButton setEnabled:NO];
    }
}

这里还有一句比较关键的代码，我我使用延展实现的，因为这样不需要初始化实例对象，可以直接使用系统的方法，只是重写一下UIButton的一个方法，来实现登陆按钮的不可点击效果

// .h
#import <UIKit/UIKit.h>

@interface UIButton (enable)

@end


// .m
#import "UIButton+enable.h"

@implementation UIButton (enable)

- (void)setEnabled:(BOOL)enabled {
    [super setEnabled:enabled];
    if (enabled) {
        self.alpha = 1.0;
    } else {
        self.alpha = 0.5;
    }
}
@end

至此已经实现了登陆注册的基本优化。写的比较基础，希望大家指正