用户体验设计理念与技术网站 - 探索 · 分享 · 收获     注册账号 忘记密码 QQ一键登录

用户体验设计学院|UED学院

当前位置: 首页 > 设计教程 > Auxre >

Axure 6.0 交互原型设计实例教程二:注册表单的判断验证模型

时间:2011-03-08 17:26来源:tanxdesign.com 作者:TANX 阅读:
在Axure里面,我们可以根据不同的条件判断,来实现全真模拟的表单验证,比如在验证码错误的时候点击提交,提示请输入正确的验证码等等,下面我们一起来看一下如何实现条件判断的: 第一步:准备好注册表单的各个元件 我们简单点,包括邮箱、密码、确认密码、

在Axure里面,我们可以根据不同的条件判断,来实现全真模拟的表单验证,比如在验证码错误的时候点击“提交”,提示“请输入正确的验证码”等等,下面我们一起来看一下如何实现条件判断的:

第一步:准备好注册表单的各个元件

我们简单点,包括邮箱、密码、确认密码、验证码、提交按钮和错误提示框,并为每一个元件命名(命名方式见教程一),这里我们分别命名为“邮箱”、“密码”、“确认密码”、“验证码”、‘‘提交”和“错误提示”。

第二步:理清验证逻辑

这一步对于程序员来说应该会很好理解,就是if…do…else if…do…else if…do…,详细分解出来就是:

当点击“快速注册”按钮的时候:

1. 如果邮箱输入框为空,“错误提示”处提示“请输入您的邮箱!”
  2. 如果邮箱输入框不为空,但是不包含“@”和“.”两个字符,“错误提示”处提示“请输入正确的邮箱!”
  3. 如果密码输入框为空,“错误提示”处提示“请输入您的密码!”
  4. 如果密码输入框不为空,但是确认密码输入框的值和密码输入框的值不等,“错误提示”处提示“两次密码不一致,请重新输入!”
  5. 如果验证码输入框为空,“错误提示”处提示“请输入验证码!”
  6. 如果验证码输入框不为空,但是值不等于slat,“错误提示”处提示“请输入正确的验证码!”
  7. 如果邮箱输入框不为空,且包含“@”和“.”两个字符,且密码输入框不为空,且确认密码输入框的值和密码输入框的值相等,且验证码输入框值等于slat,跳转到“XXX”页面。

上面的七个判断是有顺序的,程序从上往下依次读取,如果不满足第一条则验证第二条,然后依次往下验证,前面6条是错误验证,最后1条是正确验证,成功则执行之后的操作,只要理解了上面这个逻辑,下面的就简单了。

第三步:在axure中添加判断事件

注意了,所有的验证都是在点击“快速注册”按钮的时候触发的,因此我们事件应该写在“快速注册”按钮的“onclick”操作上:

接下来依次写上6个事件:

点击上图中的添加事件后弹出条件1的事件编辑框如下图,然后我们点击“Add Condition”添加判断条件,你可以理解成是在写”if条件”。

点击“Add Condition”弹出条件编辑框:

写下如下条件:

好,条件1写完了,点击确定,然后设置在条件1下执行的事件,应该是“错误提示”输入框的值显示“请输入您的邮箱!”

然后点击确定关掉所有弹窗,可以看到“onclick”那里变成了这样:

点击添加事件,继续添加条件,下面6步就不详解了,最后的效果会是下面这样(注意顺序):

教程到这里就结束了,谢谢观看,你可以下载源文件查看过程:axure6-form.rar

原文链接:http://tanxdesign.com/?p=1286

(责任编辑:uedtech。本文版权归作者所有,转载请注明来自UED学院,并保留原文作者与链接!)
顶一个
(2)
100%
踩一个
(0)
0%
------分隔线----------------------------
推荐内容
  • Axure常用交互效果制作

    本文旨在分享一些在Axure中,相对复杂但又常见的交互行为的制作方法,本期包含带 提示...