最近偶然關(guān)注到驗(yàn)證碼的原型，想起我們實(shí)際遇到的驗(yàn)證碼基本都是不區(qū)分大小寫的，那么就讓我們一起來(lái)做一個(gè)關(guān)于忽略大小寫的驗(yàn)證碼原型吧。

第一步，準(zhǔn)備相應(yīng)部件

拖下兩個(gè)矩形，一個(gè)文本框，一個(gè)對(duì)號(hào)，一個(gè)錯(cuò)號(hào)，總共5個(gè)部件。

如圖所示，其中一個(gè)矩形輸入文字“換一張”，以通過(guò)它來(lái)實(shí)現(xiàn)我們后面更新驗(yàn)證碼功能，另一個(gè)矩形可命名為“驗(yàn)證碼”以便我們識(shí)別它。對(duì)號(hào)填充為綠色，錯(cuò)號(hào)為紅色（按常規(guī)習(xí)慣而已），這些圖標(biāo)可以在axure的icons部件庫(kù)里找到。

第二步?設(shè)置全局變量

打開(kāi)axure會(huì)有一個(gè)默認(rèn)的全局變量，我們可以設(shè)置要顯示的驗(yàn)證碼就來(lái)源于該變量，添加26個(gè)小寫英文字母和26個(gè)大寫英文字母以及10個(gè)數(shù)字進(jìn)該變量。另外我們還需要新增一個(gè)變量，這里我把它命名為“A”A不用編輯它的值，留空就行。全局變量可在菜單欄中項(xiàng)目選項(xiàng)下設(shè)置，如圖所示：

第三步 設(shè)置頁(yè)面加載事件

我們需要設(shè)置為讓頁(yè)面加載時(shí)，驗(yàn)證碼矩形框隨機(jī)出現(xiàn)4位驗(yàn)證碼。

這個(gè)用例共分為四步，第一步是設(shè)置一個(gè)判斷條件，當(dāng)驗(yàn)證碼框中文字長(zhǎng)度小于4時(shí)，判斷觸發(fā)；第二步設(shè)置變量值A(chǔ) 為：[[A]][[OnLoadVariable.substr(Math.floor(Math.random()*62),1)]]；第三步是設(shè)置驗(yàn)證碼矩形框文本為變量值A(chǔ)，第四步是設(shè)置觸發(fā)事件頁(yè)面載入時(shí)，以形成循環(huán)，直到有4位驗(yàn)證碼為止。

第四步，設(shè)置驗(yàn)證碼更新，即當(dāng)我們單擊那個(gè)顯示文字為“換一張”的矩形框時(shí)會(huì)刷新驗(yàn)證碼。

這個(gè)用例分為三步實(shí)現(xiàn)，第一步設(shè)置驗(yàn)證碼矩形框和文本框文字為空，然后將變量值A(chǔ)設(shè)為空，最后觸發(fā)事件頁(yè)面載入時(shí)，進(jìn)行新一輪的驗(yàn)證碼顯示，當(dāng)然為了保證效果我們還要隱藏對(duì)號(hào)及錯(cuò)號(hào)符號(hào)。

第五步，設(shè)置驗(yàn)證碼判斷

這是最后一步了，條件判斷看著多但是也不復(fù)雜，邏輯就是當(dāng)文本框的字符長(zhǎng)度為4時(shí)開(kāi)始校驗(yàn)輸入的驗(yàn)證碼是否正確，如果正確的話顯示對(duì)勾的符號(hào)，錯(cuò)誤的話就顯示錯(cuò)誤的符號(hào)，而字符長(zhǎng)度不為4時(shí)則不進(jìn)行校驗(yàn)。

這個(gè)用例設(shè)置在 按鍵松開(kāi)時(shí)（這樣可以即時(shí)判斷），第一步是設(shè)置條件當(dāng)文本框的字符長(zhǎng)度為4，并且判斷，文本框的文字轉(zhuǎn)為大寫后語(yǔ)驗(yàn)證碼轉(zhuǎn)為大寫后相等（為了實(shí)現(xiàn)忽略大小寫功能，具體見(jiàn)截圖），則顯示對(duì)號(hào)隱藏錯(cuò)號(hào)，不相等時(shí)，則顯示錯(cuò)號(hào)隱藏對(duì)號(hào)；當(dāng)字符長(zhǎng)度不為4時(shí)，則對(duì)號(hào)與錯(cuò)號(hào)一起隱藏。然后將對(duì)號(hào)與錯(cuò)號(hào)疊放在一起，并且初始狀態(tài)設(shè)為隱藏，這樣原型就大功告成了?。?！

現(xiàn)在我們可以通過(guò)預(yù)覽來(lái)檢驗(yàn)我們的勞動(dòng)成果啦，如果要取消大小寫校驗(yàn)只需要把第五步中相應(yīng)的判斷刪除即可??！

擴(kuò)展：這個(gè)原型算是比較粗糙的，我們可以在這個(gè)基礎(chǔ)上進(jìn)行一些修飾，比如將對(duì)錯(cuò)號(hào)顯示用動(dòng)態(tài)面板的方式實(shí)現(xiàn)，將矩形的邊框隱藏，設(shè)置懸停顯示下劃線等等，這就有賴于小伙伴們根據(jù)需要去制作啦。

預(yù)覽地址：http://kfzfqf.axshare.com

源文件下載：http://pan.baidu.com/s/1i5bsehv

本文由 @會(huì)飛的魚 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。