使用Axure制作注册用户名检验案例

Axure是一款功能强大的原型设计工具，可以用于制作各种互联网产品的交互原型。在本文中，我们将分享一个使用Axure制作“注册用户名检验”案例的思路，并提供效果参考。

案例效果参考

下面是该案例的示意图：

1. 当输入为空时，提示：请输入用户名。

2. 当输入已经存在的账号时，提示：账号已经存在。

3. 当输入可用的用户名时，显示勾选图标。

布局和元素准备

首先，我们需要创建以下元素：

- 两个文本标签（分别用于显示"用户名"和"提示"）

- 一个文本框（用于用户输入用户名）

- 一个勾选图标（表示用户名可用）

并按照以下布局进行排列：

- 隐藏勾选图标和提示。

全局变量设置

创建一个全局变量"UserName"，并设置内容为：

- Arthur

- jack

- Alice

- admin

- user

全局变量的设置如下图所示：

[图片]

设置输入验证动作

下一步是设置文本输入框的验证动作，需要定义在文本改变时和失去焦点时的动作。

文本改变时的动作：

条件1：当输入为空或包含"请输入用户名..."时。

- 隐藏勾选图标。

- 隐藏提示。

条件2：当输入为已经存在的账号时。

- 隐藏勾选图标。

- 显示提示，内容为"账号已经存在"。

条件3：其他情况。

- 显示勾选图标。

- 隐藏提示。

失去焦点时的动作：

条件1：当输入为空或包含"请输入用户名..."时。

- 隐藏勾选图标。

- 隐藏提示。

- 文本输入框获得焦点。

- 设置文本输入框内容为"请输入用户名..."。

条件2：当输入为已经存在的账号时。

- 文本输入框获得焦点。

所有动作的设置如下图所示：

[图片]

查看效果

设置完动作后，你可以查看效果了。分别输入"已有的账号"、"不存在的账号"以及空账号来测试。

完成上述步骤后，你已经成功制作了一个注册用户名检验的案例！

版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。