Axure怎么實(shí)現(xiàn)電話號碼的驗(yàn)證的原型?

發(fā)布時間：2016-03-30 10:00:25 作者：佚名

Axure怎么實(shí)現(xiàn)電話號碼的驗(yàn)證的原型？很多網(wǎng)站都會用電話號碼來什么賬號，但是怎么才能判斷別人輸入的電話號碼正不正確呢？下面我們來看看Axure電話號碼的驗(yàn)證的教程，需要的朋友可以參考下

Axure制作原型的登陸驗(yàn)證時，不免要使用到手機(jī)、郵箱的驗(yàn)證，沒有正則表達(dá)式，我們來使用字符串的方式做簡單的驗(yàn)證：

一、思路

1、驗(yàn)證長度是否為11位

2、設(shè)置輸入長度為11位

3、驗(yàn)證輸入的值是否為數(shù)字

3、截取字符串的前三位判斷是否是在已經(jīng)發(fā)布的號碼段且在前三位

二、Axure手機(jī)號碼驗(yàn)證

1、先做一個簡易的布局，并對文件進(jìn)行命名

文本框：phonenum

消息提示：phonemess

2、選中phonenum,進(jìn)行屬性設(shè)置：

選擇類型為：phonenum（手機(jī)號）

提示信息為：請輸入手機(jī)號

最大長度為：11

3、為文本框（phonenum）添加：文字改變時交互用例：

4、點(diǎn)擊：添加條件，并選擇值選項(xiàng)，選擇值以后對輸入的文字進(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ù)字和字符串的驗(yàn)證（雖然我們設(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)行測試：