Axure制作原型的登陸驗(yàn)證時(shí),不免要使用到手機(jī)、郵箱的驗(yàn)證,沒(méi)有正則表達(dá)式,我們來(lái)使用字符串的方式做簡(jiǎn)單的驗(yàn)證:
一、思路
1、驗(yàn)證長(zhǎng)度是否為11位
2、設(shè)置輸入長(zhǎng)度為11位
3、驗(yàn)證輸入的值是否為數(shù)字
3、截取字符串的前三位判斷是否是在已經(jīng)發(fā)布的號(hào)碼段且在前三位

二、Axure手機(jī)號(hào)碼驗(yàn)證
1、先做一個(gè)簡(jiǎn)易的布局,并對(duì)文件進(jìn)行命名
文本框:phonenum
消息提示:phonemess

2、選中phonenum,進(jìn)行屬性設(shè)置:
選擇類(lèi)型為:phonenum(手機(jī)號(hào))
提示信息為:請(qǐng)輸入手機(jī)號(hào)
最大長(zhǎng)度為:11

3、為文本框(phonenum)添加:文字改變時(shí) 交互用例:

4、點(diǎn)擊:添加條件, 并選擇值選項(xiàng),選擇值以后對(duì)輸入的文字進(jìn)行大小判斷:

5、插入一個(gè)變量,參考下圖,并按照第二張圖進(jìn)行設(shè)置,


6、然候進(jìn)行消息提示設(shè)置,設(shè)置文本為:大于100000000:參考下圖:

7、再次添加一個(gè)case,并設(shè)置文本為:輸入值有誤;

8、此時(shí)進(jìn)行一次預(yù)覽,來(lái)看效果:
輸入:1234567890提示輸入有誤
輸入:12345678901提示大于10000000000
結(jié)合我們對(duì)輸入框限制的輸入長(zhǎng)度,我們可以確認(rèn)當(dāng)前的輸入長(zhǎng)度為11個(gè)



9、下面需要進(jìn)行:數(shù)字和字符串的驗(yàn)證(雖然我們?cè)O(shè)置了類(lèi)型為手機(jī)號(hào),但用戶(hù)依然可以輸入字符串,且文本框接受輸入,所以我們必須進(jìn)行判斷):
編輯:case1,新增條件:此處添加的變量,與第一次添加的變量含義一樣,均為phonenum的元件文字


10、以上我們確保了:用戶(hù)輸入的是數(shù)字,且長(zhǎng)度等于11,下面我們進(jìn)行字符串的截取判斷,判斷前三位是否是我們已知的號(hào)碼段就可以,來(lái)看設(shè)置:
在case1上繼續(xù)添加判斷,插入變量利用indexof來(lái)判斷:130 131等號(hào)段是否出現(xiàn)在前三位即可,函數(shù):[[(LVAR1.indexOf('130')==0)||(LVAR1.indexOf('131')==0)]],LVAR1的設(shè)置參考下圖,依然是phonenum的元件文字:


11、截止到此處,我們可以進(jìn)行再一次的預(yù)覽,來(lái)判斷我們輸入的號(hào)碼是否在130 131 號(hào)段內(nèi):


12、根據(jù)第11步的預(yù)覽,完全正確,那么我們來(lái)繼續(xù)完善其他號(hào)段即可:
函數(shù):
[[(LVAR1.indexOf('130')==0)||(LVAR1.indexOf('131')==0)||(LVAR1.indexOf('132')==0)||(LVAR1.indexOf('133')==0)||(LVAR1.indexOf('134')==0)||(LVAR1.indexOf('135')==0)||(LVAR1.indexOf('136')==0)||(LVAR1.indexOf('137')==0)||(LVAR1.indexOf('138')==0)||(LVAR1.indexOf('139')==0)||(LVAR1.indexOf('180')==0)||(LVAR1.indexOf('189')==0)||(LVAR1.indexOf('150')==0)||(LVAR1.indexOf('151')==0)||(LVAR1.indexOf('159')==0)||(LVAR1.indexOf('157')==0)||(LVAR1.indexOf('177')==0)]]
號(hào)段判斷的不是特別全,您可以自行添加其他號(hào)段。
另:將提示信息:大于10000000000,更改成:輸入正確
再次預(yù)覽進(jìn)行測(cè)試:



相關(guān)推薦:
Axure繪制好的原型怎么發(fā)布和預(yù)覽?
Axure怎么制作頁(yè)面滾動(dòng)時(shí)菜單固定在頂部的頁(yè)面?
windows系統(tǒng)下axure 7.0 無(wú)法在發(fā)布中預(yù)覽的解決辦法
新聞熱點(diǎn)
疑難解答
圖片精選