Axure電話號碼的驗證?

Axure製作原型的登陸驗證時,不免要使用到手機、郵箱的驗證,沒有正則表示式,我們來使用字串的方式做簡單的驗證:

思路

1:驗證長度是否為11位

2:設定輸入長度為11位

3:驗證輸入的值是否為數字

3:擷取字串的前三位判斷是否是在已經發布的號碼段且在前三位

Axure電話號碼的驗證

工具/原料

axure8.0 beta版

Axure手機號碼驗證

先做一個簡易的佈局,並對檔案進行命名

文字框:phonenum

訊息提示:phonemess

Axure電話號碼的驗證

選中phonenum,進行屬性設定:

選擇型別為:phonenum(手機號)

提示資訊為:請輸入手機號

最大長度為:11

Axure電話號碼的驗證

為文字框(phonenum)新增:文字改變時 互動用例:

Axure電話號碼的驗證

點選:新增條件, 並選擇值選項,選擇值以後對輸入的文字進行大小判斷:

Axure電話號碼的驗證

插入一個變數,參考下圖,並按照第二張圖進行設定,

Axure電話號碼的驗證

Axure電話號碼的驗證

然候進行訊息提示設定,設定文字為:大於100000000:

參考下圖:

Axure電話號碼的驗證

再次新增一個case,並設定文字為:輸入值有誤;

Axure電話號碼的驗證

此時進行一次預覽,來看效果:

輸入:1234567890提示輸入有誤

輸入:12345678901提示大於10000000000

結合我們對輸入框限制的輸入長度,我們可以確認當前的輸入長度為11個

Axure電話號碼的驗證

Axure電話號碼的驗證

Axure電話號碼的驗證

下面需要進行:數字和字串的驗證(雖然我們設定了型別為手機號,但使用者依然可以輸入字串,且文字框接受輸入,所以我們必須進行判斷):

編輯:case1,新增條件:

此處新增的變數,與第一次新增的變數含義一樣,均為phonenum的元件文字

Axure電話號碼的驗證

Axure電話號碼的驗證

以上我們確保了:使用者輸入的是數字,且長度等於11,下面我們進行字串的擷取判斷,判斷前三位是否是我們已知的號碼段就可以,來看設定:

在case1上繼續新增判斷,插入變數利用indexof來判斷:130 131等號段是否出現在前三位即可,函式:[[(LVAR1.indexOf('130')==0) (LVAR1.indexOf('131')==0)]]

LVAR1的設定參考下圖,依然是phonenum的元件文字:

Axure電話號碼的驗證

Axure電話號碼的驗證

截止到此處,我們可以進行再一次的預覽,來判斷我們輸入的號碼是否在130 131 號段內:

Axure電話號碼的驗證

Axure電話號碼的驗證

根據第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,更改成:輸入正確

再次預覽進行測試:

Axure電話號碼的驗證

Axure電話號碼的驗證

Axure電話號碼的驗證

注意事項

如有不明白之處請聯絡作者,如有幫助,請給個贊哦,謝謝。

相關問題答案