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

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

先看演示GIF圖

功能梳理

1、昵稱不能包含中文，不能為空，失去焦點時，會出現不同的提示

2、密碼不能包含空格，長度為8-16位，包含字母、數字、特殊符號（英文半角符號）不少于2種

3、密碼框在密碼輸入變化時，實時檢測是否符合標準（留意gif圖中“灰色！”和“綠色√”圖標的變化）

4、點擊眼睛圖標，能將密碼中的“●”顯示為輸入的文本，松開鼠標時，又恢復為“●”

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

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

7、手機號必須是數字，必須是1開頭，必須滿11位

8、驗證碼為兩個數字兩個字母組合，每刷新一次，更換一次，隨機更換，不重復。

9、驗證碼欄不能為空，不能和驗證圖片不符

需要用到的函數

1、length：獲取當前文本對象的長度，即字符個數；1個漢字的長度按1計算。

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

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

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

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

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

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

原型制作

第一部分 昵稱注冊驗證

元件分布

交互設置

特別說明：

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

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

這個靠AXURE自身是解決不了的，會寫JS編碼的朋友，可以在axure中寫入JS編碼來實現。也歡迎會寫代碼的朋友，在回復中留言。

第二部分 密碼的注冊驗證

元件分布

交互設置

最后加上，密碼可見性的交互

特別說明：

為什么一定是英文半角符號，因為在實際寫代碼的過程中，當輸入密碼時，會只允許調用英文鍵盤，不會出現漢字和全角符號，所以大家在測試演示原型時，要輸入半角英文符號測試。

第三部分 郵箱地址的注冊驗證

元件分布

交互設置

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

第四部分 手機號碼的注冊驗證

元件分布

交互設置

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

第五部分 驗證碼的注冊驗證

元件分布

交互設置

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

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

所有關于靠函數驗證注冊條件的交互完畢。

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

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