AxureRP8实战手册-案例23(全局变量:账号登录验证①)

本文详细介绍了如何利用全局变量在注册界面实现账号登录验证的交互设计,包括输入框的样式变化、错误提示的显示以及已注册账号的检查。通过设置不同状态下的边框颜色、提示图标和文字,确保用户能清晰了解输入是否有效。同时,文章提到了全局变量在存储预置账号中的作用,以及如何通过条件判断实现不同的交互反馈。
摘要由CSDN通过智能技术生成

 案例23. 全局变量:账号登录验证(1)

案例来源:

站酷-注册界面

案例效果:

  • 初始状态时:(图2-1)

2-1

  • 焦点进入时:(图2-2)

2-2

  • 输入为空时:(图2-3)

2-3

  • 已被注册时:(图2-4)

2-4

  • 验证通过时:(图2-5)

2-5

案例描述:

注册面板中的用户名输入框,在光标进入输入框以及离开输入框时,输入框的边框都会有相应的变色,并有相应的提示图标和文字提示。

元件准备:

  • 页面中:(图2-6)

2-6

包含命名:

  • 文本标签(用于显示提示图标):MessageIcon
  • 文本标签(用于显示提示文字):MessageText
  • 全局变量(用于存储预置账号):UserName

思路分析:

  • 根据案例效果,输入框需设置三种状态下显示的颜色;(操作步骤1)
  • 根据案例效果,需要有预置的用户名,与输入的用户名进行比较;(操作步骤2)
  • 光标进入文本框时,边框呈现黄色;(操作步骤3)
  • 光标离开文本框时,如果是用户名未输入,边框要呈现红色,并有淡红色的填充;同时,显示错误的红色提示图标“”和文字“请输入用户名”;(操作步骤4~6)
  • 光标离开文本框时,如果是用户名已注册,边框要呈现红色,并有淡红色的填充;同时,显示错误的红色提示图标“”和文字“账号已经存在”;(操作步骤7~9)
  • 如果不是以上两种情况,则显示灰色的边框,显示正确的绿色图标“”和灰色文字“通过验证”。(操作步骤10~12)

操作步骤:

1、元件边框默认设置为黄色;然后,在元件属性中,设置矩形边框的【禁用】与【选中】的交互样式;禁用状态矩形边框为灰色;选中状态矩形的边框为红色,填充为淡红色;最后,勾选【禁用】选项,让边框初始状态显示灰色;(图2-7)

2-7

2、创建全局变量“UserName”,并将已注册账号设置为默认值;为了避免混乱和误判断,我们需要将每个用户名用特殊符号隔开;这一步可参考基础38;(图2-8)

2-8

3、为文本框【获取焦点时】事件添加“用例1”,设置动作【启用】矩形“BorderShape”,让矩形显示为黄色边框;

  • 用例动作设置:(图2-9)

2-9

4、为文本框【失去焦点时】事件添加“用例1”,为用例添加判断,判断条件为【元件文字】于“当前元件”(This)【==】【值】“”(空白);然后,设置符合判断条件时的动作为【选中】矩形“BorderShape”,让其呈鲜红色边框和淡红色填充;

  • 条件判断设置:(图2-10)

2-10

  • 用例动作设置:(图2-11)

2-11

5、继续上一步,添加动作【设置文本】文本标签“MessageIcon”为【富文本】;点击【编辑文本】按钮,在打开的界面中粘贴图标字体“ ”,并设置为红色;

  • 用例动作设置:(图2-12)

2-12

  • 文本编辑设置:(图2-13)

2-13

6、继续上一步,添加动作【设置文本】文本标签“MessageText”为【富文本】;点击【编辑文本】按钮,在打开的界面中输入文字“请输入用户名”,并设置为红色。

  • 用例动作设置:(图2-14)

2-14

  • 文本编辑设置:(图2-15)

2-15

7、继续为文本框【失去焦点时】事件添加“用例2”,设置条件判断【变量值】于“UserName”【包含】【元件文字】“当前元件”(This);然后,设置符合判断条件时的动作为【选中】矩形“BorderShape”,让其呈鲜红色边框和淡红色填充;(用例动作设置参考操作步骤4)

  • 条件判断设置(图2-16)

2-16

8、继续上一步,添加动作【设置文本】文本标签“MessageIcon”为【富文本】;点击【编辑文本】按钮,在打开的界面中粘贴图标字体“ ”,并设置为红色;(参考操作步骤5)

9、继续上一步,添加动作【设置文本】文本标签“MessageText”为【富文本】;点击【编辑文本】按钮,在打开的界面中输入文字“账号已经存在”,并设置为红色;(参考操作步骤6)

  • 事件交互设置:(图2-17)

2-17

10、继续为文本框【失去焦点时】事件添加“用例3”,软件自动给出条件“Else If”;设置不满足“用例1”与“用例2”条件时,执行的动作为【禁用】矩形“BorderShape”,让边框呈现灰色;(参考操作步骤1)

11、继续上一步,添加动作【设置文本】文本标签“MessageIcon”为【富文本】;点击【编辑文本】按钮,在打开的界面中粘贴图标字体“ ”,并设置为绿色;(参考操作步骤5)

12、继续上一步,添加动作【设置文本】文本标签“MessageText”为【富文本】;点击【编辑文本】按钮,在打开的界面中输入文字“验证通过”,并设置为灰色。(参考操作步骤6)

  • 事件交互设置:(图2-18)

2-18

13、因为操作步骤4与操作步骤7中,有选中矩形“BorderShape”的操作,所以当验证未通过后,光标进入文本框,还会显示选中时的样式;所以,需要在文本框的【获取焦点时】事件的“用例1”中再添加一个动作,【取消选中】矩形“BorderShape”。

  • 事件交互设置:(图2-19)

2-19

补充说明:

  • 全局变量是一个看不见的能够存储数据的容器,可以在整个原型中的任何地方对其进行读取和写入的操作;本案例中就是通过全局变量预先存储已注册的用户名,然后与新输入的用户名进行比较,根据比较结果设置相应的交互内容;
  • 本案例中使用了“FontAwesome4.4.0”图标字体元件库,需要安装字体文件支持,并进行Web字体设置;(参考案例1的补充说明)
  • 受知识点限制,本案例还存在验证错误的情况,比如输入“xiao”,也会通过验证;这个问题将在后面有关局部变量的案例中进行解决。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值