Axure怎么進(jìn)行郵箱格式驗證?

想要制作一個郵箱驗證,該制作一個判斷郵箱格式是否正確的頁面效果呢?請看下文詳細(xì)介紹。

Axure RP v8.1.0.3382 Enterprise 中文特別版(附注冊機(jī)+漢化包+安裝教程)
- 類型:輔助設(shè)計
- 大小:83.2MB
- 語言:簡體中文
- 時間:2019-04-26
1、我們這里以文本框為例,新建一個文本輸入框,然后在建一個標(biāo)簽。文本輸入框用來輸入需要校驗的信息,標(biāo)簽是我們要顯示的提示語。如圖所示:
2、設(shè)置標(biāo)簽樣式。選中標(biāo)簽,將提示語的文字顏色給為紅色,然后設(shè)置為隱藏。勾選右上角的隱藏選項即可。
3、設(shè)置輸入框失去焦點事件。選中文本輸入框,單擊交互面板中的失去焦點時--打開交互設(shè)置界面。
4、設(shè)置判斷條件。點擊添加條件,設(shè)置判斷條件如圖所示:郵箱驗證比較簡單,我們一般只需要驗證@符號和.com兩個關(guān)鍵點。所以只要輸入的文字中不包含這兩個元素中的任何一個,我們就顯示提示標(biāo)簽。
注意:添加兩個條件一定要選擇任何,不要選擇全部,這個就是and和or的區(qū)別。
5、配置條件對應(yīng)的動作。點擊顯示--然后選擇我們第二步中隱藏的提示標(biāo)簽。這樣在文本框失去焦點的時候會校驗我們添加的條件,如果條件滿足,就顯示提示標(biāo)簽。
6、配置文字改變時條件及動作。點擊交互面板中的文字改變時--添加條件。我們這里要選擇文字中包含@并且包含.com,提示的標(biāo)簽隱藏。
注意:這里兩個條件要選擇全部,必須是兩個條件同時滿足才可以。如圖所示:
7、點擊預(yù)覽,輸入一個錯誤的格式,會提示格式不正確,修改會提示消失。
以上就是Axure對輸入的內(nèi)容進(jìn)行驗證的教程,希望大家喜歡,請繼續(xù)關(guān)注腳本之家。
相關(guān)推薦:
Axure怎么設(shè)計網(wǎng)頁強(qiáng)密碼驗證效果?
相關(guān)文章
- axure怎么設(shè)計手機(jī)屏幕的滾動條原型?手機(jī)中經(jīng)常能見到滾動條,該怎么制作滾動條效果呢?下面我們就來看看axure滾動條的制作方法,需要的朋友可以參考下2018-03-27
axure怎么設(shè)計手機(jī)app的側(cè)邊欄原型?
axure怎么設(shè)計手機(jī)app的側(cè)邊欄原型?axure中想要設(shè)計原型很簡單,手機(jī)app的側(cè)邊欄我們經(jīng)常見,想要設(shè)計這個原型,該怎么設(shè)計呢?下面我們就來看看詳細(xì)的教程,需要的朋友可2018-03-27- axure怎么設(shè)計由流程組件組成的UI?axure中有很多組件,想要調(diào)用流程組件設(shè)計ui,該怎么設(shè)計呢?下面我們就來看看詳細(xì)的教程,需要的朋友可以參考下2018-03-26
Axure RP 8怎么設(shè)計有漂亮圖標(biāo)的樹狀菜單?
Axure RP 8怎么設(shè)計有漂亮圖標(biāo)的樹狀菜單?Axure中設(shè)計的樹狀菜單為了更美觀,想要添加漂亮的圖標(biāo),該怎么添加呢?下面我們就來看看詳細(xì)的教程,需要的朋友可以參考下2018-03-19- Axure動態(tài)面板怎么制作三級菜單?Axure想要設(shè)計一個網(wǎng)頁的三級菜單,該怎么設(shè)計呢?我們可以使用動態(tài)面板實現(xiàn),下面我們就來看看詳細(xì)的教程,需要的朋友可以參考下2018-03-08
AXURE RP 8怎么設(shè)置下拉菜單? AXURE下拉菜單的制作方法
AXURE RP 8怎么設(shè)置下拉菜單?AXURE RP 8中設(shè)計網(wǎng)頁原型的時候,想要制作一個下拉菜單,該怎么制作呢?下面我們就來看看AXURE下拉菜單的制作方法,需要的朋友可以參考下2018-03-05Axure RP控制列表框怎么設(shè)置默認(rèn)顯示選中值?
Axure RP控制列表框怎么設(shè)置默認(rèn)顯示選中值?Axure中制作了列表框,列表框中添加了數(shù)據(jù),想要默認(rèn)顯示選中數(shù)據(jù),該怎么實現(xiàn)呢?下面我們就來看看詳細(xì)的教程,需要的朋友可2018-02-24- Axure怎么設(shè)計基礎(chǔ)信息的頁面?Axure中想要設(shè)計一款用戶信息的頁面,該怎么設(shè)計呢?下面我們就來看看Axure頁面的詳細(xì)設(shè)計方法,需要的朋友可以參考下2018-02-08
Axure怎么給網(wǎng)頁設(shè)計左側(cè)三級導(dǎo)航菜單欄?
Axure怎么給網(wǎng)頁設(shè)計左側(cè)三級導(dǎo)航菜單欄?Axure想要給網(wǎng)頁設(shè)計一款簡單的左側(cè)三級導(dǎo)航菜單,該怎么色劑呢?下面我們就來看看詳細(xì)的教程,需要的朋友可以參考下2018-02-04- 在使用軟件時,很多朋友習(xí)慣用快捷鍵。今天小編為大家?guī)砹薃xure快捷鍵大全,希望對大家有所幫助,一起看看吧2018-02-02