Axure制作一个“注册用户名检验”案例,分享制作思路~效果可参考以下示意图:1.当输入为空时,提示:请输入用户名2.已经存在的账号提示3.已存在账号,不会丢失焦点,直到输入可用用户名
工具/原料
AxureRP8
方法/步骤
1、新建2个文本标签,1个文本框,及1个“勾选”图标:1.修改1个“文本标签”内容为:用户名2.修改1个“文本标签”内容为:提示,并命名为:提示3.设置“勾选”图标颜色为绿色,及大小如图所示:
2、布局如下:隐藏“勾选”图标和“提示”
3、创建一个全局变量“UserName”,设置内容为:<Arthur><jack><Alice><admin><user>如下图所示:
4、前期准备工作做好后,就是设置“文本输入框”内容验证动作,需要设置“文本输入框”的“文本改变时”和“失去焦点时”的动作
5、“文本输入框”的“文本改变时”有3个条件动作:
6、条件1:---当输入为空时,或包含“请输入用户名…”---如下图所示:
7、动作1:---1.隐藏“勾选”图标2.隐藏“提示”---
8、条件2:---当输入“已经存在的账号时”---如下图所示:
9、动作2:---1.隐藏“勾选”图标2.显示“提示”3.设置“提示”内容为“账号已经存在”---
10、**“提示”内容可以设置为“富文本”模式,可参考下图:
11、条件3:---其他时---动作3:---1.显示“勾选”图标2.隐藏“提示”---
12、“文本输入框”的“失去焦点时”有2个条件动作:
13、条件1:---当输入为空时,或包含“请输入用户名…”---如下图所示:
14、动作1:---1.隐藏“勾选”图标2.隐藏“提示”3.“文本输入框”获得焦点4.设置“文本输入框”内容为“请输入用户名…”---
15、条件2:---当输入“已经存在的账号时”---如下图所示:
16、动作2:---“文本输入框”获得焦点---
17、所有动作汇总截图如下:
18、动作设置完后,就可以看效果了分别输入”已有的账号“,”不存在的账号“及”空账号“ok!大功告成~