Axure製作原型的登陸驗證時,不免要使用到手機、郵箱的驗證,沒有正則表示式,我們來使用字串的方式做簡單的驗證:
思路
1:驗證長度是否為11位
2:設定輸入長度為11位
3:驗證輸入的值是否為數字
3:擷取字串的前三位判斷是否是在已經發布的號碼段且在前三位
工具/原料
axure8.0 beta版
Axure手機號碼驗證
先做一個簡易的佈局,並對檔案進行命名
文字框:phonenum
訊息提示:phonemess
選中phonenum,進行屬性設定:
選擇型別為:phonenum(手機號)
提示資訊為:請輸入手機號
最大長度為:11
為文字框(phonenum)新增:文字改變時 互動用例:
點選:新增條件, 並選擇值選項,選擇值以後對輸入的文字進行大小判斷:
插入一個變數,參考下圖,並按照第二張圖進行設定,
然候進行訊息提示設定,設定文字為:大於100000000:
參考下圖:
再次新增一個case,並設定文字為:輸入值有誤;
此時進行一次預覽,來看效果:
輸入:1234567890提示輸入有誤
輸入:12345678901提示大於10000000000
結合我們對輸入框限制的輸入長度,我們可以確認當前的輸入長度為11個
下面需要進行:數字和字串的驗證(雖然我們設定了型別為手機號,但使用者依然可以輸入字串,且文字框接受輸入,所以我們必須進行判斷):
編輯:case1,新增條件:
此處新增的變數,與第一次新增的變數含義一樣,均為phonenum的元件文字
以上我們確保了:使用者輸入的是數字,且長度等於11,下面我們進行字串的擷取判斷,判斷前三位是否是我們已知的號碼段就可以,來看設定:
在case1上繼續新增判斷,插入變數利用indexof來判斷:130 131等號段是否出現在前三位即可,函式:[[(LVAR1.indexOf('130')==0) (LVAR1.indexOf('131')==0)]]
LVAR1的設定參考下圖,依然是phonenum的元件文字:
截止到此處,我們可以進行再一次的預覽,來判斷我們輸入的號碼是否在130 131 號段內:
根據第11步的預覽,完全正確,那麼我們來繼續完善其他號段即可:
函式:
[[(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,更改成:輸入正確
再次預覽進行測試:
注意事項
如有不明白之處請聯絡作者,如有幫助,請給個贊哦,謝謝。