起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)Axure教程：驗(yàn)證碼原型制作實(shí)例
作者主要針對(duì)如何利用Axure制作驗(yàn)證碼原型進(jìn)行了一些分享，希望對(duì)大家有所啟發(fā)。
賬戶的登錄注冊(cè)為了系統(tǒng)的安全，避免惡意的攻擊，一般都需要添加驗(yàn)證碼，當(dāng)然有成熟的框架使用，但是在原型的時(shí)候怎么顯得很酷炫呢，那么接下來的就用得著了。需要下面幾個(gè)步驟準(zhǔn)備。
一、準(zhǔn)備
首先，需要四個(gè)元件：
1、輸入框：用來輸入驗(yàn)證碼，命名：輸入框
2、矩形框：用來顯示系統(tǒng)的二維碼，命名：驗(yàn)證碼
3、按鈕：顯示按鈕換一張，命名：換一張
4、動(dòng)態(tài)面板：用來顯示提示信息，命名：提示信息，兩個(gè)狀態(tài)一個(gè)：正確；一個(gè)：錯(cuò)誤。
這四個(gè)元件，也可以用其他的代替，只要能完成設(shè)計(jì)就可以。
然后，設(shè)置全局變量。
OnLoadVariable默認(rèn)值為：
0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
yzm默認(rèn)值為空；
全局變量的名字可以自己取，OnLoadVariable的默認(rèn)值就是驗(yàn)證碼隨機(jī)取的值，可以自己隨便設(shè)定。
二、設(shè)置
1、當(dāng)前頁面
不選擇任何元件，點(diǎn)擊當(dāng)前的頁面，在【檢視】-【屬性】添加交互事件，選擇【頁面載入時(shí)】事件（因?yàn)樵陧撁娲蜷_時(shí)是默認(rèn)有一個(gè)驗(yàn)證碼的），本例默認(rèn)驗(yàn)證碼為4位。
含義：
驗(yàn)證碼默認(rèn)情況下文字是空，所以條件是如果驗(yàn)證碼文字的長(zhǎng)度小于4，那么就為驗(yàn)證碼設(shè)置一個(gè)值，并且在頁面載入時(shí)就顯示出來。
步驟：
雙擊【頁面載入】事件設(shè)置，在彈框最上方用例名稱后邊點(diǎn)擊【添加條件】。
設(shè)置條件為：
條件為驗(yàn)證碼的長(zhǎng)度小于4就執(zhí)行下面的事件，直到驗(yàn)證碼文字的長(zhǎng)度=4結(jié)束。
ymz的值：[[yzm]][[OnLoadVariable.substr(Math.floor(Math.random()*62),1)]]
含義：
ymz的值來自O(shè)nLoadVariable變量，substr（）實(shí)現(xiàn)；
Math.random（）*62，是數(shù)學(xué)的隨機(jī)函數(shù)，隨機(jī)位0~1之間的數(shù)，*62后就會(huì)隨機(jī)0~62之間的數(shù)；
Math.floor（），是數(shù)學(xué)向上取整函數(shù)
所以整體的意思就是，取OnLoadVariable隨機(jī)一位數(shù)給ymz。
2、輸入框
含義：
如果輸入框位文字長(zhǎng)度是4同時(shí)文字等于驗(yàn)證碼的文字，那么顯示動(dòng)態(tài)面板-提示信息的值是正確的；其他的情況不顯示或者提示錯(cuò)誤。
步驟：
case1：其他的也是如此
3、按鈕換一張
含義：
清空驗(yàn)證碼、輸入框、隱藏提示信息，同時(shí)重新觸發(fā)頁面載入時(shí)的時(shí)間。
步驟：
清空就是將文本的值設(shè)為空即可。
三、預(yù)覽
結(jié)束，可以預(yù)覽了，看看什么效果。注意，原型沒有那么智能，大小寫是要區(qū)分的哦~
效果預(yù)覽：http://71wgw6.axshare.com
小伙伴們自己試試吧，就不放原型了。
整體的過程設(shè)置還是比較復(fù)雜的，但是用使用的時(shí)間長(zhǎng)了之后還是可以靈活運(yùn)用的。
本文由 @dantina 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
請(qǐng)問您最后一張圖配置動(dòng)作是怎么做的，我找了好久沒找到。還有fire頁面載入是on頁面這步怎么做的？
添加動(dòng)作中最下面：觸發(fā)事件，然后在配置動(dòng)作列，選擇元件，最后選擇該元件下可配置的動(dòng)作就可以了
嗯，實(shí)現(xiàn)了，謝謝作者，感覺自己好幸運(yùn)，當(dāng)天您就回復(fù)了，我看您應(yīng)該好久沒登了。
照著一20分鐘就會(huì)了，就是不太好理解，我做完以后為什么不顯示錯(cuò)誤呢？只顯示正確，,還有就是驗(yàn)證碼如果有大寫和小寫組合起來的，你必須要切換，如何調(diào)整呢？
那就應(yīng)該是在設(shè)置錯(cuò)誤條件時(shí)出現(xiàn)了誤差，再檢查下什么原因吧，還有就是驗(yàn)證碼顯示大小寫或者文字等等，都需要自己先創(chuàng)建庫和寫函數(shù)了。這個(gè)交給開發(fā)做就可以，不用原型上完全實(shí)現(xiàn)。
這個(gè)方法能做中文驗(yàn)證碼嗎？
這個(gè)驗(yàn)證碼是隨機(jī)出現(xiàn)的，你寫一個(gè)中文隨機(jī)出現(xiàn)的方法就可以。。
我想要每次刷新隨機(jī)出現(xiàn)一個(gè)詞組
那就先要將出現(xiàn)的詞組創(chuàng)建一個(gè)庫，然后寫方法把詞組取出來呈現(xiàn)，這個(gè)原型上我沒做過。如果喜歡研究，可以自己想一下。但這個(gè)在開發(fā)上去實(shí)現(xiàn)就好了，而且一般也會(huì)引用第三方的組件。
初級(jí)者操作了一晚上才弄成功 ??
我也是搞了很久，因?yàn)檫壿嫳容^復(fù)雜 不過多操作幾次就會(huì)快很多
感謝分享，然后math.floor(X)貌似是向下取整數(shù)？我百度來的是這樣說的
是的，是向下去整
6666