美文网首页
关于对用户输入提示的思考

关于对用户输入提示的思考

作者: JohnnyB0Y | 来源:发表于2017-09-01 16:46 被阅读19次

    前言

    大部分App 在输入表单的时候都是采用,用户输入满足条件后,功能按钮才能点击。

    我个人觉得这是很没体验的,为什么呢?

    拿登录举例,产品需求是登录名称必须满足在几个文字以内,密码必须下划线、数字、英文组合。如果输入不满足要求,按钮就不能点击。提示信息是放到占位文字里的,只要输入了文字,就看不见提示了。而此时用户可能会迷糊,不知道该怎么做,一脸懵逼的感觉。

    而另一种思路是,让按钮一直可以点击。只要用户点击按钮,就提示相关的信息,例如哪一行不满足要求,给个红色背景框什么的。这样用户就知道问题所在了。

    我觉得好的体验就是让用户得到各种信息反馈,而不是说输入内容不能包含emoji,就阻断用户的输入,让用户的输入没反应,然后一脸懵逼。因此巴拉巴拉。。。好了,实在编不下去了!!!

    AGVerifyManagerDemo.png

    Talk is cheap. Show me the code.

    AGVerifyManager

    思路描述

    • 参考了 Masonry 的链式语法,链式语法的优雅非常适合用来连续验证多个数据。
    • 因为用户需要验证的数据是变化且各不相同的,所以把变化隔离开来,独立封装。
    • 验证的时候需要集中处理,所以用代码块统一了起来。

    cocoapods 集成

    platform :ios, '7.0'
    target 'AGVerifyManagerDemo' do
    
    pod 'AGVerifyManager'
    
    end
    

    使用说明

    
    - 创建遵守并实现<AGVerifyManagerVerifiable>协议的验证器类;
    - 如:Emoji表情验证器、手机号码验证器 ...
    - 使用 AGVerifyManager 搭配相应的验证器对数据进行验证和结果回调。
    - 
    - AGVerifyManager 可以直接执行验证,然后释放Block;
    - 也可以保存Block,通过Key个别进行验证,重复进行验证,或者在后台线程进行验证。
    - 
    - 具体可参考 Demo
    - 下面是代码片段
    
    // 1. 判断用户输入文字限制
    ATTextLimitVerifier *usernameVerifier = [ATTextLimitVerifier new];
    usernameVerifier.minLimit = 2;
    usernameVerifier.maxLimit = 7;
    usernameVerifier.maxLimitMsg =
    [NSString stringWithFormat:@"文字不能超过%@个字符!", @(usernameVerifier.maxLimit)];
    
    // 2. 判断文字是否包含 emoji 😈
    ATEmojiVerifier *emojiVerifier = [ATEmojiVerifier new];
    emojiVerifier.errorMsg = @"请输入非表情字符!";
        
    // 3. 判断文字是否包含空格
    ATWhiteSpaceVerifier *whiteSpaceVerifier = [ATWhiteSpaceVerifier new];
        
    // 4. 准备验证
    __weak typeof(self) weakSelf = self;
    [self.verifyManager ag_addVerifyForKey:@"Key" verifying:^(id<AGVerifyManagerVerifying> start) {
            
        __strong typeof(weakSelf) self = weakSelf;
            
        start
        // 用法一:传入验证器和需要验证的数据;
        .verifyData(usernameVerifier, self.nameTextField.text)
        .verifyData(emojiVerifier, self.nameTextField.text)
        // 用法二:传入验证器、数据、提示的内容;
        .verifyDataWithMsg(whiteSpaceVerifier, self.nameTextField.text, @"文字不能包含空格!")
        // 用法三:传入验证器、数据、你想传递的对象;文本框闪烁
        .verifyDataWithContext(self, self.nameTextField.text, self.nameTextField);
            
    } completion:^(AGVerifyError *firstError, NSArray<AGVerifyError *> *errors) {
            
        __strong typeof(weakSelf) self = weakSelf;
        if ( firstError ) {
            // 验证不通过
            self.resultLabel.textColor = [UIColor redColor];
            self.resultLabel.text = firstError.msg;
                
            // 文本框闪烁
            [errors enumerateObjectsUsingBlock:^(AGVerifyError *obj, NSUInteger idx, BOOL *stop) {
                    
                // 取出传递的对象,根据自身业务处理。
                if ( obj.context == self.nameTextField ) {
                    // 取色
                    UIColor *color;
                    if ( obj.code == 100 ) {
                        color = [UIColor redColor];
                    }
                    else if ( obj.code == 200 ) {
                        color = [UIColor purpleColor];
                    }
                    // 动画
                    [UIView animateWithDuration:0.15 animations:^{
                        self.nameTextField.backgroundColor = color;
                    } completion:^(BOOL finished) {
                        self.nameTextField.backgroundColor = [UIColor whiteColor];
                    }];
                }
            }];
        }
        else {
            // TODO
            self.resultLabel.textColor = [UIColor greenColor];
            self.resultLabel.text = @"验证通过!";
            self.nameTextField.backgroundColor = [UIColor whiteColor];
        }
    }];
    
    // 5. 执行验证
    [self.verifyManager ag_executeVerifyBlockForKey:@"Key"];
    
    

    多数情况下

    1. 在项目中,使用最多的还是用来过滤网络请求的数据。
      例如 API参数验证,API返回状态码验证。如果出错,APIManager 就会调用请求失败的回调,而我们就在失败回调里弹框提示错误信息。例如 token 过期、密码错误、没有权限等信息。

    2. AGVerifyManager 是采用协议的方式验证的,所以验证器是谁遵守了协议都可以做的。例如 TableViewCell 遵守了协议,就可以自己做裁判还当运动员。

    相关文章

      网友评论

          本文标题:关于对用户输入提示的思考

          本文链接:https://www.haomeiwen.com/subject/hafkjxtx.html