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

今天和大家聊聊如何利用Axure實現(xiàn)圖片驗證碼的隨機切換，并且驗證對錯！

首先來分析下需要實現(xiàn)的效果：

1. 圖片中的驗證碼為數(shù)字和字母的隨機組合；
2. 點擊更換驗證碼實現(xiàn)驗證碼的更換，驗證碼隨機出現(xiàn)4位字母或數(shù)字；
3. 驗證碼輸入時，點擊提交按鈕，若驗證碼錯誤進行錯誤提示。

1. 準備

• 文本框（用來輸入驗證碼）；
• 矩形框（用來顯示生成的二維碼）；
• 動態(tài)面板（提示驗證碼輸入結(jié)果對錯與空），設置三個動態(tài)面板提示狀態(tài)，默認為隱藏；
• 提交按鈕；
• 文本標簽（看不清？換一張?。?。

以上元件自行命名，在做交互效果時候方便自己操作即可，這里命名為。

隨機驗證碼是顯示在一個矩形框內(nèi)，這里只需要從26個大寫英文字母和10個數(shù)字中隨機獲取一位字符，四個字符拼成一個隨機驗證碼，且允許有重復字母出現(xiàn)。

2. 開始

①文本框先輸入四個字符，作為起始默認驗證碼！如下圖所示！

②點擊【換一張】→ 新建交互 → 單擊時 → 設置變量值 → 全局變量

將變量值設置為abcdefghij……xyz0123456789（26個英文字母+10個數(shù)字），意思是驗證碼的值將會在以上字符中產(chǎn)生。

③繼續(xù)上面的交互狀態(tài)，單擊時 → 設置文本 → 選擇“驗證碼”，值為[[OnLoadVariable.substr(OnLoadVariable.length*Math.random(),1)]]，將以上代碼連續(xù)輸入四遍，中間不需要加符號。

這一步的意思是點擊【換一張】，隨機選中四個字符設置為驗證碼的值顯示在驗證碼框中。

④這一步我們開始進行驗證碼提交驗證。

點擊【提交】→ 新建交互 → 單擊時

設置情形一：如果輸入框文字 == 驗證碼文字

設置面板狀態(tài)到提示正確面板狀態(tài)，且設置面板狀態(tài)為可見。

設置情形二：如果輸入框文字 ！= 驗證碼文字

設置面板狀態(tài)到提示錯誤面板狀態(tài)，且設置面板狀態(tài)為可見。

⑤點擊預覽，這樣我們一個圖形驗證碼就做好啦~

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

題圖來自Unsplash，基于CC0協(xié)議