养生 装修 购物 美食 感冒 便秘 营销 加盟 小吃 火锅 管理 创业 搭配 减肥 培训 旅游

Axure制作:注册用户名检验

时间:2024-10-19 05:17:51

Axure制作一个“注册用户名检验”案例,分享制作思路~效果可参考以下示意图:1.当输入为空时,提示:请输入用户名2.已经存在的账号提示3.已存在账号,不会丢失焦点,直到输入可用用户名

Axure制作:注册用户名检验

工具/原料

AxureRP8

方法/步骤

1、新建2个文本标签,1个文本框,及1个“勾选”图标:1.修改1个“文本标签”内容为:用户名2.修改1个“文本标签”内容为:提示,并命名为:提示3.设置“勾选”图标颜色为绿色,及大小如图所示:

Axure制作:注册用户名检验

2、布局如下:隐藏“勾选”图标和“提示”

Axure制作:注册用户名检验

3、创建一个全局变量“UserName”,设置内容为:<Arthur><jack><Alice><admin><user>如下图所示:

Axure制作:注册用户名检验

4、前期准备工作做好后,就是设置“文本输入框”内容验证动作,需要设置“文本输入框”的“文本改变时”和“失去焦点时”的动作

5、“文本输入框”的“文本改变时”有3个条件动作:

6、条件1:---当输入为空时,或包含“请输入用户名…”---如下图所示:

Axure制作:注册用户名检验

7、动作1:---1.隐藏“勾选”图标2.隐藏“提示”---

8、条件2:---当输入“已经存在的账号时”---如下图所示:

Axure制作:注册用户名检验

9、动作2:---1.隐藏“勾选”图标2.显示“提示”3.设置“提示”内容为“账号已经存在”---

10、**“提示”内容可以设置为“富文本”模式,可参考下图:

Axure制作:注册用户名检验

Axure制作:注册用户名检验

11、条件3:---其他时---动作3:---1.显示“勾选”图标2.隐藏“提示”---

12、“文本输入框”的“失去焦点时”有2个条件动作:

13、条件1:---当输入为空时,或包含“请输入用户名…”---如下图所示:

Axure制作:注册用户名检验

14、动作1:---1.隐藏“勾选”图标2.隐藏“提示”3.“文本输入框”获得焦点4.设置“文本输入框”内容为“请输入用户名…”---

15、条件2:---当输入“已经存在的账号时”---如下图所示:

Axure制作:注册用户名检验

16、动作2:---“文本输入框”获得焦点---

17、所有动作汇总截图如下:

Axure制作:注册用户名检验

18、动作设置完后,就可以看效果了分别输入”已有的账号“,”不存在的账号“及”空账号“ok!大功告成~

Axure制作:注册用户名检验

© 一点知识