在上一篇的《中繼器使用場(chǎng)景（五）：真實(shí)環(huán)境注冊(cè)、多身份登錄、找回密碼》中提到，會(huì)專門就注冊(cè)條件驗(yàn)證的案例出一篇教程，今天就詳述如下：

原型參照：QQ注冊(cè)。為了集中講解，將qq昵稱注冊(cè)和郵箱賬號(hào)注冊(cè)合二為一，為大家演示。

先看演示GIF圖

功能梳理

1、昵稱不能包含中文，不能為空，失去焦點(diǎn)時(shí)，會(huì)出現(xiàn)不同的提示

2、密碼不能包含空格，長(zhǎng)度為8-16位，包含字母、數(shù)字、特殊符號(hào)（英文半角符號(hào)）不少于2種

3、密碼框在密碼輸入變化時(shí)，實(shí)時(shí)檢測(cè)是否符合標(biāo)準(zhǔn)（留意gif圖中“灰色！”和“綠色√”圖標(biāo)的變化）

4、點(diǎn)擊眼睛圖標(biāo)，能將密碼中的“●”顯示為輸入的文本，松開鼠標(biāo)時(shí)，又恢復(fù)為“●”

5、密碼框失去焦點(diǎn)時(shí)，如果密碼不符合規(guī)則，按優(yōu)先順序顯示錯(cuò)誤提示（留意gif圖中紅色錯(cuò)誤提示的出現(xiàn)規(guī)律）

6、郵件地址不能為空，要有“.”“@”符號(hào)，不能包含中文，“.”和“@”之間要有字符，不能有兩個(gè)@

7、手機(jī)號(hào)必須是數(shù)字，必須是1開頭，必須滿11位

8、驗(yàn)證碼為兩個(gè)數(shù)字兩個(gè)字母組合，每刷新一次，更換一次，隨機(jī)更換，不重復(fù)。

9、驗(yàn)證碼欄不能為空，不能和驗(yàn)證圖片不符

需要用到的函數(shù)

1、length：獲取當(dāng)前文本對(duì)象的長(zhǎng)度，即字符個(gè)數(shù)；1個(gè)漢字的長(zhǎng)度按1計(jì)算。

2、charAt(index)：獲取當(dāng)前文本對(duì)象中指定位置的字符，index為大于等于0的整數(shù)。位置從0開始算

3、charCodeAt(index)：獲取當(dāng)前文本對(duì)象中指定位置字符的Unicode編碼，起始位置從0開始。

4、indexOf(‘searchValue’)：從左至右獲取查詢字符串在當(dāng)前文本對(duì)象中首次出現(xiàn)的位置。未查詢到時(shí)返回值為-1。

5、lastIndexOf(‘searchvalue’)：從右至左獲取查詢字符串在當(dāng)前文本對(duì)象中首次出現(xiàn)的位置。未查詢到時(shí)返回值為-1。

6、數(shù)字函數(shù)Math.random()：隨機(jī)數(shù)函數(shù)，返回一個(gè)0~1之間的隨機(jī)數(shù)。

7、數(shù)字函數(shù)Math.floor(x)：向下取整函數(shù)，獲取小于或者等于指定數(shù)值的最大整數(shù)。x為數(shù)字

原型制作

第一部分 昵稱注冊(cè)驗(yàn)證

元件分布

交互設(shè)置

特別說(shuō)明：

1. nicheng文本框和nicheng2文本框都要隱藏邊框，邊框顏色的變化靠矩形nicheng□來(lái)表現(xiàn)
2. charAt(index)的起始位置為0而不是1，這是“LVAR1.length-1”的原因
3. 當(dāng)按下Backspace鍵即退格刪除鍵時(shí)，nicheng2文字==nicheng的原始文本，nicheng2比nicheng多一個(gè)字符，多的這個(gè)字符就是記錄nicheng被刪除的那個(gè)字符?？聪路紾IF示例

這個(gè)交互有一定的瑕疵，就是按退格鍵時(shí)要從后向前依次刪除，能夠正常演示，如果是鼠標(biāo)隨意插入到漢字的前后，進(jìn)行刪除，就不能正常判斷了。

這個(gè)靠AXURE自身是解決不了的，會(huì)寫JS編碼的朋友，可以在axure中寫入JS編碼來(lái)實(shí)現(xiàn)。也歡迎會(huì)寫代碼的朋友，在回復(fù)中留言。

第二部分 密碼的注冊(cè)驗(yàn)證

元件分布

交互設(shè)置

最后加上，密碼可見(jiàn)性的交互

特別說(shuō)明：

為什么一定是英文半角符號(hào)，因?yàn)樵趯?shí)際寫代碼的過(guò)程中，當(dāng)輸入密碼時(shí)，會(huì)只允許調(diào)用英文鍵盤，不會(huì)出現(xiàn)漢字和全角符號(hào)，所以大家在測(cè)試演示原型時(shí)，要輸入半角英文符號(hào)測(cè)試。

第三部分 郵箱地址的注冊(cè)驗(yàn)證

元件分布

交互設(shè)置

特別說(shuō)明：有興趣的朋友，可以將“不能含有漢字”的交互加入進(jìn)去，在這里就不再贅述

第四部分 手機(jī)號(hào)碼的注冊(cè)驗(yàn)證

元件分布

交互設(shè)置

特別說(shuō)明：有興趣的朋友，可以將“不能含有漢字”的交互加入進(jìn)去，在這里就不再贅述，還可以加入“不能有5個(gè)以上相同的數(shù)字”的交互，用Unicode判斷即可

第五部分 驗(yàn)證碼的注冊(cè)驗(yàn)證

元件分布

交互設(shè)置

[[Math.floor(Math.random()*10)]]? 取0-9的隨機(jī)數(shù)

[[LVAR1.charAt(Math.floor(Math.random()*52))]] 隨機(jī)截取寫有52個(gè)字母的zimu文本框中的字母

所有關(guān)于靠函數(shù)驗(yàn)證注冊(cè)條件的交互完畢。

本文由 @bobowang 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自 Pexels ，基于 CC0 協(xié)議