字串函式：搞定增強型“註冊驗證”條件設定
原型參照：QQ註冊。為了集中講解，將qq暱稱註冊和郵箱賬號註冊合二為一，為大家演示。
先看演示GIF圖
功能梳理
1、暱稱不能包含中文，不能為空，失去焦點時，會出現不同的提示
2、密碼不能包含空格，長度為8-16位，包含字母、數字、特殊符號（英文半形符號）不少於2種
3、密碼框在密碼輸入變化時，實時檢測是否符合標準（留意gif圖中“灰色！”和“綠色√”圖示的變化）
4、點選眼睛圖示，能將密碼中的“●”顯示為輸入的文字，鬆開滑鼠時，又恢復為“●”
5、密碼框失去焦點時，如果密碼不符合規則，按優先順序顯示錯誤提示（留意gif圖中紅色錯誤提示的出現規律）
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為數字
原型製作
第一部分 暱稱註冊驗證
元件分佈
互動設定
特別說明：
- nicheng文字框和nicheng2文字框都要隱藏邊框，邊框顏色的變化靠矩形nicheng□來表現
- charAt(index)的起始位置為0而不是1，這是“LVAR1.length-1”的原因
- 當按下Backspace鍵即退格刪除鍵時，nicheng2文字==nicheng的原始文字，nicheng2比nicheng多一個字元，多的這個字元就是記錄nicheng被刪除的那個字元。看下方GIF示例
這個互動有一定的瑕疵，就是按退格鍵時要從後向前依次刪除，能夠正常演示，如果是滑鼠隨意插入到漢字的前後，進行刪除，就不能正常判斷了。
這個靠AXURE自身是解決不了的，會寫JS編碼的朋友，可以在axure中寫入JS編碼來實現。也歡迎會寫程式碼的朋友，在回覆中留言。
第二部分 密碼的註冊驗證
元件分佈
互動設定
最後加上，密碼可見性的互動
特別說明：
為什麼一定是英文半形符號，因為在實際寫程式碼的過程中，當輸入密碼時，會只允許呼叫英文鍵盤，不會出現漢字和全形符號，所以大家在測試演示原型時，要輸入半形英文符號測試。
第三部分 郵箱地址的註冊驗證
元件分佈
互動設定
特別說明：有興趣的朋友，可以將“不能含有漢字”的互動加入進去，在這裡就不再贅述
第四部分 手機號碼的註冊驗證
元件分佈
互動設定
特別說明：有興趣的朋友，可以將“不能含有漢字”的互動加入進去，在這裡就不再贅述，還可以加入“不能有5個以上相同的數字”的互動，用Unicode判斷即可
第五部分 驗證碼的註冊驗證
元件分佈
互動設定
[[Math.floor(Math.random()*10)]] 取0-9的隨機數 [[LVAR1.charAt(Math.floor(Math.random()*52))]] 隨機擷取寫有52個字母的zimu文字框中的字母
所有關於靠函式驗證註冊條件的互動完畢。
本文由 @bobowang 原創釋出於人人都是產品經理。未經許可，禁止轉載
題圖來自 Pexels ，基於 CC0 協議