Axure怎么設(shè)計網(wǎng)頁強密碼驗證效果?

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

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