中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

最近偶然關注到驗證碼的原型，想起我們實際遇到的驗證碼基本都是不區分大小寫的，那么就讓我們一起來做一個關于忽略大小寫的驗證碼原型吧。

第一步，準備相應部件

拖下兩個矩形，一個文本框，一個對號，一個錯號，總共5個部件。

如圖所示，其中一個矩形輸入文字“換一張”，以通過它來實現我們后面更新驗證碼功能，另一個矩形可命名為“驗證碼”以便我們識別它。對號填充為綠色，錯號為紅色（按常規習慣而已），這些圖標可以在axure的icons部件庫里找到。

第二步?設置全局變量

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

第三步 設置頁面加載事件

我們需要設置為讓頁面加載時，驗證碼矩形框隨機出現4位驗證碼。

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

第四步，設置驗證碼更新，即當我們單擊那個顯示文字為“換一張”的矩形框時會刷新驗證碼。

這個用例分為三步實現，第一步設置驗證碼矩形框和文本框文字為空，然后將變量值A設為空，最后觸發事件頁面載入時，進行新一輪的驗證碼顯示，當然為了保證效果我們還要隱藏對號及錯號符號。

第五步，設置驗證碼判斷

這是最后一步了，條件判斷看著多但是也不復雜，邏輯就是當文本框的字符長度為4時開始校驗輸入的驗證碼是否正確，如果正確的話顯示對勾的符號，錯誤的話就顯示錯誤的符號，而字符長度不為4時則不進行校驗。

這個用例設置在 按鍵松開時（這樣可以即時判斷），第一步是設置條件當文本框的字符長度為4，并且判斷，文本框的文字轉為大寫后語驗證碼轉為大寫后相等（為了實現忽略大小寫功能，具體見截圖），則顯示對號隱藏錯號，不相等時，則顯示錯號隱藏對號；當字符長度不為4時，則對號與錯號一起隱藏。然后將對號與錯號疊放在一起，并且初始狀態設為隱藏，這樣原型就大功告成了?。?！

現在我們可以通過預覽來檢驗我們的勞動成果啦，如果要取消大小寫校驗只需要把第五步中相應的判斷刪除即可??！

擴展：這個原型算是比較粗糙的，我們可以在這個基礎上進行一些修飾，比如將對錯號顯示用動態面板的方式實現，將矩形的邊框隱藏，設置懸停顯示下劃線等等，這就有賴于小伙伴們根據需要去制作啦。

預覽地址：http://kfzfqf.axshare.com

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

本文由 @會飛的魚 原創發布于人人都是產品經理。未經許可，禁止轉載。