想要制作一個(gè)郵箱驗(yàn)證,該制作一個(gè)判斷郵箱格式是否正確的頁(yè)面效果呢?請(qǐng)看下文詳細(xì)介紹。
1、我們這里以文本框?yàn)槔陆ㄒ粋€(gè)文本輸入框,然后在建一個(gè)標(biāo)簽。文本輸入框用來(lái)輸入需要校驗(yàn)的信息,標(biāo)簽是我們要顯示的提示語(yǔ)。如圖所示:
2、設(shè)置標(biāo)簽樣式。選中標(biāo)簽,將提示語(yǔ)的文字顏色給為紅色,然后設(shè)置為隱藏。勾選右上角的隱藏選項(xiàng)即可。
3、設(shè)置輸入框失去焦點(diǎn)事件。選中文本輸入框,單擊交互面板中的失去焦點(diǎn)時(shí)--打開(kāi)交互設(shè)置界面。
4、設(shè)置判斷條件。點(diǎn)擊添加條件,設(shè)置判斷條件如圖所示:郵箱驗(yàn)證比較簡(jiǎn)單,我們一般只需要驗(yàn)證@符號(hào)和.com兩個(gè)關(guān)鍵點(diǎn)。所以只要輸入的文字中不包含這兩個(gè)元素中的任何一個(gè),我們就顯示提示標(biāo)簽。
注意:添加兩個(gè)條件一定要選擇任何,不要選擇全部,這個(gè)就是and和or的區(qū)別。
5、配置條件對(duì)應(yīng)的動(dòng)作。點(diǎn)擊顯示--然后選擇我們第二步中隱藏的提示標(biāo)簽。這樣在文本框失去焦點(diǎn)的時(shí)候會(huì)校驗(yàn)我們添加的條件,如果條件滿足,就顯示提示標(biāo)簽。
6、配置文字改變時(shí)條件及動(dòng)作。點(diǎn)擊交互面板中的文字改變時(shí)--添加條件。我們這里要選擇文字中包含@并且包含.com,提示的標(biāo)簽隱藏。
注意:這里兩個(gè)條件要選擇全部,必須是兩個(gè)條件同時(shí)滿足才可以。如圖所示:
7、點(diǎn)擊預(yù)覽,輸入一個(gè)錯(cuò)誤的格式,會(huì)提示格式不正確,修改會(huì)提示消失。
以上就是Axure對(duì)輸入的內(nèi)容進(jìn)行驗(yàn)證的教程,希望大家喜歡,請(qǐng)繼續(xù)關(guān)注錯(cuò)新站長(zhǎng)站。
新聞熱點(diǎn)
疑難解答