Axure怎么設(shè)計(jì)網(wǎng)頁(yè)強(qiáng)密碼驗(yàn)證效果?

Axure制作的密碼輸入需要驗(yàn)證驗(yàn)證是否包含大寫字母,小寫字母,數(shù)字和特殊符號(hào),但是Axure不支持正則表達(dá)式,所以做一些規(guī)則上的驗(yàn)證,嵌套很多,下面我們就來(lái)分享強(qiáng)密碼驗(yàn)證效果的制作方法,請(qǐng)看下文實(shí)例教程。

Axure RP v8.1.0.3382 Enterprise 中文特別版(附注冊(cè)機(jī)+漢化包+安裝教程)
- 類型:輔助設(shè)計(jì)
- 大小:83.2MB
- 語(yǔ)言:簡(jiǎn)體中文
- 時(shí)間:2019-04-26
1、強(qiáng)密碼驗(yàn)證原理,是判定按鍵的ASCII碼:大寫字母,ASCII碼范圍在65-90小寫字母,ASCII碼范圍在97-122數(shù)字,ASCII碼范圍在48-57特殊字符,ASCII碼范圍在33-47、58-64、91-96、123-126---**使用ASCII碼判定,是為將來(lái)驗(yàn)證“連續(xù)數(shù)字或連續(xù)字母”做準(zhǔn)備**支持的特殊字符,可按需求選擇相應(yīng)的數(shù)值
2、新建4個(gè)“空?qǐng)A”圖標(biāo),4個(gè)“勾選”圖標(biāo),4個(gè)標(biāo)簽及1個(gè)文本框:
1)修改4個(gè)“標(biāo)簽”內(nèi)容分別為:大寫字母、小寫字母、數(shù)字、特殊符號(hào)
2)命名4個(gè)“勾選”圖標(biāo)為:大寫、小寫、數(shù)字、特殊
如圖所示:
3、“勾選”圖標(biāo)和“空?qǐng)A”圖標(biāo)重疊,并隱藏“勾選”圖標(biāo),具體布局如下:
4、布局完成后,就是針對(duì)“文本框”的“文本改變時(shí)”做相應(yīng)的驗(yàn)證動(dòng)作設(shè)置,這里最主要用的到函數(shù)就是:charCodeAt(index),用來(lái)獲取按鍵的ASCII碼
1)判定大寫字母
判斷輸入的字符,ASCII碼是否在65-90的范圍內(nèi)
判斷值:[[this.text.charCodeAt(this.text.length-1)]]
動(dòng)作:顯示“圖標(biāo):大寫”,并“置于頂層”
2)判定數(shù)字
判斷輸入的字符,是否為數(shù)字
判斷值:[[this.text.charAt(this.text.length-1)]]
動(dòng)作:顯示“圖標(biāo):數(shù)字”,并“置于頂層”
3)判定小寫字母
判斷輸入的字符,ASCII碼是否在97-122的范圍內(nèi)
判斷值:[[this.text.charCodeAt(this.text.length-1)]]
動(dòng)作:顯示“圖標(biāo):小寫”,并“置于頂層”
4)判定特殊符號(hào)
**因?yàn)樘厥夥?hào)分屬4個(gè)范圍,為符合條件判定,需要做4個(gè)范圍的判定,這里僅舉例1個(gè)做范例,其他可參考補(bǔ)全
判斷輸入的字符,ASCII碼是否在33-47的范圍內(nèi)
判斷值:[[this.text.charCodeAt(this.text.length-1)]]
動(dòng)作:顯示“圖標(biāo):特殊”,并“置于頂層”
5)清除字符串后,重置狀態(tài)
判斷“文本框”輸入的字符串長(zhǎng)度是否為0
動(dòng)作:隱藏“圖標(biāo):大寫、圖標(biāo):數(shù)字、圖標(biāo):小寫、圖標(biāo):特殊”
所有動(dòng)作匯總截圖如下:
動(dòng)作設(shè)置完后,就可以看效果了。輸入字符后,判斷是否為大寫字母、小寫字母、數(shù)字、特殊符號(hào)……
以上就是axure強(qiáng)密碼驗(yàn)證效果的制作方法,希望大家喜歡,請(qǐng)繼續(xù)關(guān)注腳本之家。
相關(guān)推薦:
相關(guān)文章
Axure怎么創(chuàng)建網(wǎng)頁(yè)的側(cè)邊欄? Axure網(wǎng)頁(yè)側(cè)邊欄的設(shè)計(jì)方法
Axure怎么創(chuàng)建網(wǎng)頁(yè)的側(cè)邊欄?Axure中想要設(shè)計(jì)側(cè)邊欄,該怎么設(shè)計(jì)側(cè)邊欄呢?下面我們就來(lái)看看Axure網(wǎng)頁(yè)側(cè)邊欄的設(shè)計(jì)方法,需要的朋友可以參考下2018-05-09AxureRP網(wǎng)頁(yè)原型怎么添加判斷條件?
AxureRP網(wǎng)頁(yè)原型怎么添加判斷條件?Axure設(shè)計(jì)網(wǎng)頁(yè)原型的時(shí)候,想要添加判斷條件,該怎么添加呢?下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可以參考下2018-05-07Axure rp網(wǎng)頁(yè)怎么設(shè)置頁(yè)面顏色? Axure設(shè)置頁(yè)面顏色的教程
Axure rp網(wǎng)頁(yè)怎么設(shè)置頁(yè)面顏色?經(jīng)常使用Axure設(shè)計(jì)網(wǎng)頁(yè),該怎么設(shè)計(jì)頁(yè)面顏色呢?下面我們就來(lái)看看Axure設(shè)置頁(yè)面顏色的教程,需要的朋友可以參考下2018-05-04Axure8怎么實(shí)現(xiàn)點(diǎn)擊按鈕打開網(wǎng)頁(yè)的功能?
Axure8怎么實(shí)現(xiàn)點(diǎn)擊按鈕打開網(wǎng)頁(yè)的功能?Axure8設(shè)計(jì)網(wǎng)頁(yè)原型的時(shí)候想要,想要讓按鈕實(shí)現(xiàn)點(diǎn)擊以后跳轉(zhuǎn)到指定網(wǎng)頁(yè),該怎么實(shí)現(xiàn)呢?下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可2018-04-19Axure怎么給網(wǎng)頁(yè)設(shè)計(jì)左側(cè)三級(jí)導(dǎo)航菜單欄?
Axure怎么給網(wǎng)頁(yè)設(shè)計(jì)左側(cè)三級(jí)導(dǎo)航菜單欄?Axure想要給網(wǎng)頁(yè)設(shè)計(jì)一款簡(jiǎn)單的左側(cè)三級(jí)導(dǎo)航菜單,該怎么色劑呢?下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可以參考下2018-02-04Axure RP 8怎么設(shè)計(jì)注冊(cè)頁(yè)面的網(wǎng)頁(yè)原型?
Axure RP 8怎么設(shè)計(jì)注冊(cè)頁(yè)面的網(wǎng)頁(yè)原型?很多網(wǎng)站都會(huì)有注冊(cè)頁(yè)面,想要設(shè)計(jì)一款注冊(cè)頁(yè)面,該怎么設(shè)計(jì)呢?下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可以參考下2018-01-15Axure設(shè)計(jì)的登陸頁(yè)面怎么生成網(wǎng)頁(yè)原型?
Axure設(shè)計(jì)的登陸頁(yè)面怎么生成網(wǎng)頁(yè)原型?Axure中設(shè)計(jì)的登陸網(wǎng)頁(yè)想要直接生成網(wǎng)頁(yè)原型,該怎么生成呢?下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可以參考下2018-01-10axure網(wǎng)頁(yè)原型怎么預(yù)覽和生成原型文件?
axure網(wǎng)頁(yè)原型怎么預(yù)覽和生成原型文件?axure中設(shè)計(jì)好的文件原型想要預(yù)覽并生成,該怎么預(yù)覽呢?下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可以參考下2017-09-25axure8怎么給網(wǎng)頁(yè)制作Tabpage頁(yè)效果?
axure8怎么給網(wǎng)頁(yè)制作Tabpage頁(yè)效果?axure8中想要給網(wǎng)頁(yè)設(shè)計(jì)一個(gè)tab標(biāo)簽效果,該怎么設(shè)計(jì)呢?下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可以參考下2017-08-29Axure RP怎么給網(wǎng)頁(yè)添加滾動(dòng)字幕?
Axure RP怎么給網(wǎng)頁(yè)添加滾動(dòng)字幕?看到很多網(wǎng)頁(yè)有滾動(dòng)字幕,想要在Axure RP中制作滾動(dòng)字幕效果,該怎么制作呢?下面我們就來(lái)看看詳細(xì)的教程,需要的朋友可以參考下2017-08-15