案例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”，也会通过验证；这个问题将在后面有关局部变量的案例中进行解决。