Axure_6.0_交互原型设计详细实例教程.doc

Axure6.0交互原型设计详细实例教程（二）——注册表单的判断验证模型比如在验证码在Axure里面，我们可以根据不同的条件判断，来实现全真模拟的表单验证，错误的时候点击“提交”，提示“请输入正确的验证码”等等，下面我们一起来看一下如何实现条件判断的：第一步：准备好注册表单的各个元件我们简单点，包括邮箱、密码、确认密码、验证码、提交按钮和错误提示框，并为每一个元件命名（命名方式见教程一），这里我们分别命名为“邮箱”、“密码”、“确认密码”、“验证码”、‘‘提交”和“错误提示”3□口Email:确认密码癫正码：错误提示框足一亍空的文本框,功住羽耳于為曲星面的动态文本看不清楚快速酬SU\T第二步：理清验证逻辑这一步对于程序员来说应该会很好理解，就是if„do„elseif„do„elseif„do„，详细分解出来就是：当点击“快速注册”按钮的时候：1. 如果邮箱输入框为空，“错误提示”处提示“请输入您的邮箱！”2. 如果邮箱输入框不为空，但是不包含“@”和“.”两个字符，“错误提示”处提示“请输入正确的邮箱！”3. 如果密码输入框为空，“错误提示”处提示“请输入您的密码！”4. 如果密码输入框不为空，但是确认密码输入框的值和密码输入框的值不等，“错误提示”处提示“两次密码不一致，请重新输入！”5. 如果验证码输入框为空，“错误提示”处提示“请输入验证码！”证码！”7.如果邮箱输入框不为空，且包含“@”和“.”两个字符，且密码输入框不为空，且确认密码输入框的值和密码输入框的值相等，且验证码输入框值等于slat,跳转到“XXX”页面。

上面的七个判断是有顺序的，程序从上往下依次读取，如果不满足第一条则验证第二条，然后依次往下验证，前面6条是错误验证，最后1条是正确验证，成功则执行之后的操作，只要理解了上面这个逻辑，下面的就简单了第三步：在axure中添加判断事件注意了，所有的验证都是在点击“快速注册”按钮的时候触发的，因此我们事件应该写在“快速注册”按钮的“onclick”操作上：1的事件编辑框如下图，然后我们点击f条件”AddCondition”接下来依次写上6个事件：点击上图中的添加事件后弹出条件添加判断条件，你可以理解成是在写”ll'J藝.aJnGEcclQ口一e窗的u-UD4E启总mCJa世口-一目ains-EqonJi口SU.Q43Qwz'Enjh」omd虫旳£器蛊呼圍绘寂眇啟点招灣savtE'EBAPUHJ5冬卫至*Luoizfi〔d_dl#a0u^益0區据靠音-V1KB1呂餐醫哪題Is黑*wf崔床廿就型活ssfsxtih寓噫灼口俯岳糾IP求幫*帛fr□弗帀翻朱一Jfrn阳卅閒廖區転廿中曲JW.U晞脸樹朱忙吐□聖和kJEO=Bpp<6jdgm□□:tl™oopp<:EEOUDK.PI1S8Q匸dalm••••••吕吕吕吕二uowuooppvIZZIIZZIIZZI写下如下条件：好，条件1写完了，点击确定，然后设置在条件框的值显示“请输入您的邮箱！”1下执行的事件，应该是“错误提示”输入Step1:Descriptio-nCase1EdtCandilionClearConciCksnStep2.AddactiarEZhj習口中打林#—国已奁口中打轩欝臣丈雷E打坯1ft嗣兰前商匚注烦佃冲打环按悝｝在业框柴中和开蜓孫j动否面扳谴亘面板加計显示B0砥刚嗣f面橱打切唤Si哦邮可见妊少）&rgpanel（s）toFranl>WlMqFtsmVVaribiiles|超謹;!g吨酣遲却壬些烧淇歹医凌启用m（s）詢自坤〔时运罩詛斗的拄虎j磁HicteSlep2St&p3:OrganiieactiansSlep4:Gonliguieactionsj.毘case1_丐Engtti口：沁jeofwiaget勻嘲'is屯阴JnrOpenSeiValueEdtor然后点击确定关掉所有弹窗，可以看到“onclick”那里变成了这样：』ijOnCIckCase1(Iflengthofvalueofwidget邮箱slessthan1丁->Settextanwiaget昔戻男亍tequalto清鲨/屆狂飛腿!点击添加事件，继续添加条件，下面6步就不详解了，最后的效果会是下面这样（注意顺序）：占卑OnGlick*亠Case1iIflengthafvalueofwidget邮籍islessthan'1').-SettextonT.'id莎t苣溟程云?、•equ*to'寿逾人恋狂fflEJf!'j—Case2'"(ElseIflengthofv.alueofwidget邮縉isgreaterUian'O'andtextonwidget田隴doesnotcontah'©')；3ettextancidget岂競亍vequalta”滑瑜入正诡葩也灌！*j—CaseS'"(ElseIflengthofvalueafwidget田辟百isgreatertiian'O'andtextanwidget0EI&doesnatcantaii":、.-Setteron.-'idget苣溟毘云vequalto'寿覇L\1E诡为肚繼!'j—Case4""(EbeIflengthofvalueofwidget鸯码islessthan'1')甲Settextanwidget睾惫云vequalto'議t?屆应换!jSCase5、'=(ElseIftextonwidget確认密码doesnotequaitextonwidget密码andlengthofvalueafv/idget^65isgreaterthan'0')y3ettextonwidget豈卷示vequalto"两.灰爭码不一埶.请垂哥螯入!4亠Case6a(ElseIflengthafvalueafwidget验证码islessthan-1-)；.Setie>