案例23. 全局变量:账号登录验证(1)
案例来源:
站酷-注册界面
案例效果:
- 初始状态时:(图2-1)
- 焦点进入时:(图2-2)
- 输入为空时:(图2-3)
- 已被注册时:(图2-4)
- 验证通过时:(图2-5)
案例描述:
注册面板中的用户名输入框,在光标进入输入框以及离开输入框时,输入框的边框都会有相应的变色,并有相应的提示图标和文字提示。
元件准备:
- 页面中:(图2-6)
包含命名:
- 文本标签(用于显示提示图标):MessageIcon
- 文本标签(用于显示提示文字):MessageText
- 全局变量(用于存储预置账号):UserName
思路分析:
- 根据案例效果,输入框需设置三种状态下显示的颜色;(操作步骤1)
- 根据案例效果,需要有预置的用户名,与输入的用户名进行比较;(操作步骤2)
- 光标进入文本框时,边框呈现黄色;(操作步骤3)
- 光标离开文本框时,如果是用户名未输入,边框要呈现红色,并有淡红色的填充;同时,显示错误的红色提示图标“”和文字“请输入用户名”;(操作步骤4~6)
- 光标离开文本框时,如果是用户名已注册,边框要呈现红色,并有淡红色的填充;同时,显示错误的红色提示图标“”和文字“账号已经存在”;(操作步骤7~9)
- 如果不是以上两种情况,则显示灰色的边框,显示正确的绿色图标“”和灰色文字“通过验证”。(操作步骤10~12)
操作步骤:
1、元件边框默认设置为黄色;然后,在元件属性中,设置矩形边框的【禁用】与【选中】的交互样式;禁用状态矩形边框为灰色;选中状态矩形的边框为红色,填充为淡红色;最后,勾选【禁用】选项,让边框初始状态显示灰色;(图2-7)
2、创建全局变量“UserName”,并将已注册账号设置为默认值;为了避免混乱和误判断,我们需要将每个用户名用特殊符号隔开;这一步可参考基础38;(图2-8)
3、为文本框【获取焦点时】事件添加“用例1”,设置动作【启用】矩形“BorderShape”,让矩形显示为黄色边框;
- 用例动作设置:(图2-9)
4、为文本框【失去焦点时】事件添加“用例1”,为用例添加判断,判断条件为【元件文字】于“当前元件”(This)【==】【值】“”(空白);然后,设置符合判断条件时的动作为【选中】矩形“BorderShape”,让其呈鲜红色边框和淡红色填充;
- 条件判断设置:(图2-10)
- 用例动作设置:(图2-11)
5、继续上一步,添加动作【设置文本】文本标签“MessageIcon”为【富文本】;点击【编辑文本】按钮,在打开的界面中粘贴图标字体“ ”,并设置为红色;
- 用例动作设置:(图2-12)
- 文本编辑设置:(图2-13)
6、继续上一步,添加动作【设置文本】文本标签“MessageText”为【富文本】;点击【编辑文本】按钮,在打开的界面中输入文字“请输入用户名”,并设置为红色。
- 用例动作设置:(图2-14)
- 文本编辑设置:(图2-15)
7、继续为文本框【失去焦点时】事件添加“用例2”,设置条件判断【变量值】于“UserName”【包含】【元件文字】“当前元件”(This);然后,设置符合判断条件时的动作为【选中】矩形“BorderShape”,让其呈鲜红色边框和淡红色填充;(用例动作设置参考操作步骤4)
- 条件判断设置(图2-16)
8、继续上一步,添加动作【设置文本】文本标签“MessageIcon”为【富文本】;点击【编辑文本】按钮,在打开的界面中粘贴图标字体“ ”,并设置为红色;(参考操作步骤5)
9、继续上一步,添加动作【设置文本】文本标签“MessageText”为【富文本】;点击【编辑文本】按钮,在打开的界面中输入文字“账号已经存在”,并设置为红色;(参考操作步骤6)
- 事件交互设置:(图2-17)
10、继续为文本框【失去焦点时】事件添加“用例3”,软件自动给出条件“Else If”;设置不满足“用例1”与“用例2”条件时,执行的动作为【禁用】矩形“BorderShape”,让边框呈现灰色;(参考操作步骤1)
11、继续上一步,添加动作【设置文本】文本标签“MessageIcon”为【富文本】;点击【编辑文本】按钮,在打开的界面中粘贴图标字体“ ”,并设置为绿色;(参考操作步骤5)
12、继续上一步,添加动作【设置文本】文本标签“MessageText”为【富文本】;点击【编辑文本】按钮,在打开的界面中输入文字“验证通过”,并设置为灰色。(参考操作步骤6)
- 事件交互设置:(图2-18)
13、因为操作步骤4与操作步骤7中,有选中矩形“BorderShape”的操作,所以当验证未通过后,光标进入文本框,还会显示选中时的样式;所以,需要在文本框的【获取焦点时】事件的“用例1”中再添加一个动作,【取消选中】矩形“BorderShape”。
- 事件交互设置:(图2-19)
补充说明:
- 全局变量是一个看不见的能够存储数据的容器,可以在整个原型中的任何地方对其进行读取和写入的操作;本案例中就是通过全局变量预先存储已注册的用户名,然后与新输入的用户名进行比较,根据比较结果设置相应的交互内容;
- 本案例中使用了“FontAwesome4.4.0”图标字体元件库,需要安装字体文件支持,并进行Web字体设置;(参考案例1的补充说明)
- 受知识点限制,本案例还存在验证错误的情况,比如输入“xiao”,也会通过验证;这个问题将在后面有关局部变量的案例中进行解决。