张经纬的博客 - 中隐留司官

Axure 制作带有判断功能的注册页面

常见的注册页面可以判断用户填写的内容,本例旨在制作一个带有判断功能的注册页面。

要求,
1、用户名输入框必须输入用户名且长度大于5。
2、判断密码输入框A是否为数字与字母注册,且长度大于6小于16。
3、判断密码输入框B是否为数字与字母组合,且长度大于6小于16,同时与密码输入框A保持一致。
4、如果不符合1、2、3要给出提示语句。

第一步:先将需要的内容画出来,它包括,填写用户名输入框,密码输入框一,密码输入框二,Disable的注册按钮(注意:输入框选择为遮罩文本)。
step_1

第二步:我们建立一个动态面板,用它来做各种错误情况下的提示语句(记得编辑他们的详细内容)。
step_2

第三步:设置动态面板为隐藏,等到必要的时候才显示它们。
step_3

第四步:点击用户名输入框,判断用户是否输入用户名,若输入并且长度大于5,并显示输入正确。
step_4
(字错了,时间==事件,偷懒不修改了)

step_4_2

第五步:点击密码输入框一,判断用户是否输入密码,并且密码数字和字母组成,且长度在6~16,如果正确显示输入正确,反之显示对应错误提示。
step_5
step_5_2

step_5_3

第六步:点击密码输入框二,判断用户是否输入密码,并且密码由数字和字母组成,长度在6~16,密码内容与密码输入框一内的字符串内容相同,用户名输入正确,密码输入框一输入正确,若均符合显示输入正确,激活注册按钮,反之显示对应错误提示。
step_6

step_6_1

step_6_21

好了,设置完毕后,按F5生成原型即可。

可以访问这里看看我生成的原型:
http://www.zhangjingwei.com/axure/reg/index.html

因为我发现我一直很难表达清楚自己的意思,所以我将原型文件一起上传了,如果您不明白的话,下载我的原型看看就全明白了。哈     :)
点击这里下载原型文件

加入书签:
  • QQ书签
  • 豆瓣
  • 豆瓣九点
  • Haohao
  • RSS
  • email

原文链接|

目前 共有 7 条评论 ,点此发表评论

  1. 学习笔记

    三月 31st, 2009 @ 16:57

    老大啊,你的第四步是从哪里进去的啊,我找不到你这一步啊,

    回复

  2. 张经纬

    三月 31st, 2009 @ 22:52

    @学习笔记
    选中一个组件–>右侧添加事件–>Setp1下方有一个“Add Condition”,点击它就是了。

    回复

  3. Axure RP资源整理 — 天真小院儿

    四月 15th, 2009 @ 09:39

    [...] Axure 制作带有判断功能的注册页面 [...]

  4. Axure RP 相关(二)--资源整理 | My Life My Sky--赵剑的博客

    四月 27th, 2009 @ 14:08

    [...] Axure 制作带有判断功能的注册页面 [...]

  5. laoK

    八月 11th, 2009 @ 15:43

    不错,很好的入手教程

    回复

  6. 风风无敌

    八月 25th, 2009 @ 11:43

    补充1点。 你输入密码后。需要失去焦点,才能出现判断。建议用 ONKEYUP.就可以实现,边输入边出现判断。更符合现实。

    回复

  7. 堂主,WEB前端开发技术 » 博客文章 » Axure RP 相关

    九月 29th, 2009 @ 13:27

    [...] Axure 制作带有判断功能的注册页面 张经纬博客上的Axure教程,他博客上有个专门的Axure分类。 [...]