AxureRP8实战手册-案例23(全局变量:账号登录验证①)

AxureRP8.0教程 小楼一夜听春语 11939℃ 0评论

 案例23. 全局变量:账号登录验证(1)

案例来源:

站酷-注册界面

 

案例效果:

  • 初始状态时:(图2-1)

2-1

  • 焦点进入时:(图2-2)

2-2

  • 输入为空时:(图2-3)

2-3

  • 已被注册时:(图2-4)

2-4

  • 验证通过时:(图2-5)

2-5

 

案例描述:

注册面板中的用户名输入框,在光标进入输入框以及离开输入框时,输入框的边框都会有相应的变色,并有相应的提示图标和文字提示。

元件准备:

  • 页面中:(图2-6)

2-6

包含命名:

  • 文本标签(用于显示提示图标):MessageIcon
  • 文本标签(用于显示提示文字):MessageText
  • 全局变量(用于存储预置账号):UserName

 

思路分析:

  • 根据案例效果,输入框需设置三种状态下显示的颜色;(操作步骤1)
  • 根据案例效果,需要有预置的用户名,与输入的用户名进行比较;(操作步骤2)
  • 光标进入文本框时,边框呈现黄色;(操作步骤3)
  • 光标离开文本框时,如果是用户名未输入,边框要呈现红色,并有淡红色的填充;同时,显示错误的红色提示图标“”和文字“请输入用户名”;(操作步骤4~6)
  • 光标离开文本框时,如果是用户名已注册,边框要呈现红色,并有淡红色的填充;同时,显示错误的红色提示图标“”和文字“账号已经存在”;(操作步骤7~9)
  • 如果不是以上两种情况,则显示灰色的边框,显示正确的绿色图标“”和灰色文字“通过验证”。(操作步骤10~12)

 

操作步骤:

1、元件边框默认设置为黄色;然后,在元件属性中,设置矩形边框的【禁用】与【选中】的交互样式;禁用状态矩形边框为灰色;选中状态矩形的边框为红色,填充为淡红色;最后,勾选【禁用】选项,让边框初始状态显示灰色;(图2-7)

2-7

2、创建全局变量“UserName”,并将已注册账号设置为默认值;为了避免混乱和误判断,我们需要将每个用户名用特殊符号隔开;这一步可参考基础38;(图2-8)

2-8

3、为文本框【获取焦点时】事件添加“用例1”,设置动作【启用】矩形“BorderShape”,让矩形显示为黄色边框;

  • 用例动作设置:(图2-9)

2-9

4、为文本框【失去焦点时】事件添加“用例1”,为用例添加判断,判断条件为【元件文字】于“当前元件”(This)【==】【值】“”(空白);然后,设置符合判断条件时的动作为【选中】矩形“BorderShape”,让其呈鲜红色边框和淡红色填充;

  • 条件判断设置:(图2-10)

2-10

  • 用例动作设置:(图2-11)

2-11

5、继续上一步,添加动作【设置文本】文本标签“MessageIcon”为【富文本】;点击【编辑文本】按钮,在打开的界面中粘贴图标字体“ ”,并设置为红色;

  • 用例动作设置:(图2-12)

2-12

  • 文本编辑设置:(图2-13)

2-13

6、继续上一步,添加动作【设置文本】文本标签“MessageText”为【富文本】;点击【编辑文本】按钮,在打开的界面中输入文字“请输入用户名”,并设置为红色。

  • 用例动作设置:(图2-14)

2-14

  • 文本编辑设置:(图2-15)

2-15

7、继续为文本框【失去焦点时】事件添加“用例2”,设置条件判断【变量值】于“UserName”【包含】【元件文字】“当前元件”(This);然后,设置符合判断条件时的动作为【选中】矩形“BorderShape”,让其呈鲜红色边框和淡红色填充;(用例动作设置参考操作步骤4)

  • 条件判断设置(图2-16)

2-16

8、继续上一步,添加动作【设置文本】文本标签“MessageIcon”为【富文本】;点击【编辑文本】按钮,在打开的界面中粘贴图标字体“ ”,并设置为红色;(参考操作步骤5)

9、继续上一步,添加动作【设置文本】文本标签“MessageText”为【富文本】;点击【编辑文本】按钮,在打开的界面中输入文字“账号已经存在”,并设置为红色;(参考操作步骤6)

  • 事件交互设置:(图2-17)

2-17

10、继续为文本框【失去焦点时】事件添加“用例3”,软件自动给出条件“Else If”;设置不满足“用例1”与“用例2”条件时,执行的动作为【禁用】矩形“BorderShape”,让边框呈现灰色;(参考操作步骤1)

11、继续上一步,添加动作【设置文本】文本标签“MessageIcon”为【富文本】;点击【编辑文本】按钮,在打开的界面中粘贴图标字体“ ”,并设置为绿色;(参考操作步骤5)

12、继续上一步,添加动作【设置文本】文本标签“MessageText”为【富文本】;点击【编辑文本】按钮,在打开的界面中输入文字“验证通过”,并设置为灰色。(参考操作步骤6)

  • 事件交互设置:(图2-18)

2-18

13、因为操作步骤4与操作步骤7中,有选中矩形“BorderShape”的操作,所以当验证未通过后,光标进入文本框,还会显示选中时的样式;所以,需要在文本框的【获取焦点时】事件的“用例1”中再添加一个动作,【取消选中】矩形“BorderShape”。

  • 事件交互设置:(图2-19)

2-19

补充说明:

  • 全局变量是一个看不见的能够存储数据的容器,可以在整个原型中的任何地方对其进行读取和写入的操作;本案例中就是通过全局变量预先存储已注册的用户名,然后与新输入的用户名进行比较,根据比较结果设置相应的交互内容;
  • 本案例中使用了“FontAwesome4.4.0”图标字体元件库,需要安装字体文件支持,并进行Web字体设置;(参考案例1的补充说明)
  • 受知识点限制,本案例还存在验证错误的情况,比如输入“xiao”,也会通过验证;这个问题将在后面有关局部变量的案例中进行解决。

 


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » AxureRP8实战手册-案例23(全局变量:账号登录验证①)

喜欢 (22)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(21)个小伙伴在吐槽
  1. 想了解下那个bordershape是指什么的?
    pangkaifeng2016-07-09 22:26 回复
    • 看图2-6
      小楼一夜听春语2016-07-23 22:10 回复
  2. 楼帅,你划线标注用的什么工具啊。。
    Domeki2016-07-26 16:31 回复
    • axure
      小楼一夜听春语2016-07-27 09:23 回复
  3. 图2-6 文本框 不但要隐藏背景 还要隐藏边框。调了半天效果都不对。
    挖开2016-08-03 19:33 回复
    • 按顺序学习基础和前面的案例,前面有专门的基础和案例讲过的隐藏边框,后面的案例中就不会再重复讲。
      小楼一夜听春语2016-08-03 22:12 回复
  4. (图2-13)这个图标字体是什么意思?
    挖开2016-08-04 17:03 回复
  5. 楼帅,为什么我富文本编辑的时候,无法粘贴复制过来的矩形呢!
    六儿神花露水2016-08-25 13:11 回复
    • 我复制的是矩形里面的文字
      小楼一夜听春语2016-08-25 14:09 回复
      • 小楼哥哥,我用的fontawesome里面那个矩形,里面没有文字呀。然后我始终复制不过来。 😥
        六儿神花露水2016-08-25 18:33 回复
        • 哪个是文本标签 设为圆形填充的颜色 双击选中就可以复制了
          蜜汁烤翅2017-01-12 14:15 回复
  6. 小楼老师,为什么我按照你的教程写帐号和密码匹配的用例,但老显示不对呢
    loufans2016-11-06 18:25 回复
  7. 在步骤5始终卡住了。。。富文本的编辑文本里面复制进去那个“图标字体”,“图标字体”是什么?如果是复制那个icon的话,就怎么也复制不进去,求教求教呀~~
    StayReal_Po2016-11-22 14:14 回复
    • 双击icon,选中里面的东西就能复制了
      Ian2016-12-19 14:43 回复
  8. 加群
    饺子2016-11-26 20:38 回复
  9. 小楼老师你好,请问判断手机号码是否合法判断第二个位置不为0,1,2,6 那个自定义选项框该怎么换行?
    小白2017-01-22 22:11 回复
    • 不能直接回车就shift加回车,或者软件更新到最新版本就能直接回车。
      小楼一夜听春语2017-01-23 14:12 回复
  10. 小楼老师,上面的我全部效果都做好了,但是massagetext和massageicon无法对齐,看起来很古怪。。。。。
    机器猫2017-04-07 15:24 回复
    • 同求这个问题 小楼老师,上面的我全部效果都做好了,但是massagetext和massageicon无法对齐,看起来很古怪。。。。。
      数星星的羊2017-05-09 11:40 回复
  11. 小楼老师,bordershape选中状态设置了红色边框,动作里面也设置了选中,但是效果中只有淡红色背景,红色边框没有,请问是怎么回事?
    doublebluexz2017-06-28 12:01 回复
    • 建议对比源文件
      小楼一夜听春语2017-06-29 12:43 回复