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

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

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

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

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

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


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

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

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



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


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


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


12、根據(jù)第11步的預(yù)覽,完全正確,那么我們來繼續(xù)完善其他號段即可:
函數(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)]]
號段判斷的不是特別全,您可以自行添加其他號段。
另:將提示信息:大于10000000000,更改成:輸入正確
再次預(yù)覽進(jìn)行測試:



新聞熱點
疑難解答
圖片精選