关于对用户输入提示的思考
2017-09-01 本文已影响19人
JohnnyB0Y
前言
大部分App 在输入表单的时候都是采用,用户输入满足条件后,功能按钮才能点击。
我个人觉得这是很没体验的,为什么呢?
拿登录举例,产品需求是登录名称必须满足在几个文字以内,密码必须下划线、数字、英文组合。如果输入不满足要求,按钮就不能点击。提示信息是放到占位文字里的,只要输入了文字,就看不见提示了。而此时用户可能会迷糊,不知道该怎么做,一脸懵逼的感觉。
而另一种思路是,让按钮一直可以点击。只要用户点击按钮,就提示相关的信息,例如哪一行不满足要求,给个红色背景框什么的。这样用户就知道问题所在了。
我觉得好的体验就是让用户得到各种信息反馈,而不是说输入内容不能包含emoji,就阻断用户的输入,让用户的输入没反应,然后一脸懵逼。因此巴拉巴拉。。。好了,实在编不下去了!!!
AGVerifyManagerDemo.pngTalk 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"];
多数情况下
-
在项目中,使用最多的还是用来过滤网络请求的数据。
例如 API参数验证,API返回状态码验证。如果出错,APIManager 就会调用请求失败的回调,而我们就在失败回调里弹框提示错误信息。例如 token 过期、密码错误、没有权限等信息。 -
AGVerifyManager 是采用协议的方式验证的,所以验证器是谁遵守了协议都可以做的。例如 TableViewCell 遵守了协议,就可以自己做裁判还当运动员。