Axure制作的密碼輸入需要驗(yàn)證驗(yàn)證是否包含大寫(xiě)字母,小寫(xiě)字母,數(shù)字和特殊符號(hào),但是Axure不支持正則表達(dá)式,所以做一些規(guī)則上的驗(yàn)證,嵌套很多,下面我們就來(lái)分享強(qiáng)密碼驗(yàn)證效果的制作方法,請(qǐng)看下文實(shí)例教程。
1、強(qiáng)密碼驗(yàn)證原理,是判定按鍵的ASCII碼:大寫(xiě)字母,ASCII碼范圍在65-90小寫(xiě)字母,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)容分別為:大寫(xiě)字母、小寫(xiě)字母、數(shù)字、特殊符號(hào)
2)命名4個(gè)“勾選”圖標(biāo)為:大寫(xiě)、小寫(xiě)、數(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)判定大寫(xiě)字母
判斷輸入的字符,ASCII碼是否在65-90的范圍內(nèi)
判斷值:[[this.text.charCodeAt(this.text.length-1)]]
動(dòng)作:顯示“圖標(biāo):大寫(xiě)”,并“置于頂層”
2)判定數(shù)字
判斷輸入的字符,是否為數(shù)字
判斷值:[[this.text.charAt(this.text.length-1)]]
動(dòng)作:顯示“圖標(biāo):數(shù)字”,并“置于頂層”
3)判定小寫(xiě)字母
判斷輸入的字符,ASCII碼是否在97-122的范圍內(nèi)
判斷值:[[this.text.charCodeAt(this.text.length-1)]]
新聞熱點(diǎn)
疑難解答
圖片精選