登錄注冊界面看起來好像挺簡單，但是要把登錄注冊界面做好，卻也不是一件簡單的事情。最近用Axure做了一個登錄注冊的小Demo，歡迎大家批評指正。

這篇文章主要分為兩個部分，第一部分先簡單介紹下注冊功能，第二部分介紹下部分功能的實現。

第一部分：簡單的介紹注冊功能

首先上原型鏈接：http://3d9jya.axshare.com? ?（加載稍微有點慢，請大家耐心等待）

上圖便是注冊界面，首先注冊界面沒有確認密碼表單，為什么？這并不是因為我忘記了，而是有原因的。首先，大家有沒有注意到現在很多網站的注冊都省去了這一步，比如百度，人人等。

我覺得原因可能是以下兩種：

1. 注冊這個過程至關重要，如果步驟過于繁瑣，用戶很可能就會在這一步放棄了；
2. 現在的注冊大多數是基于手機號碼和郵箱，找回密碼的成本很低，況且現在用戶擁有那么多賬號密碼，你可以確保用戶下次登錄的時候就記得密碼？

接著來看一下注冊功能的流程圖：

簡單概說一下流程圖：

當用戶點擊注冊按鈕的時候，會去檢查三個文本框中的內容是否符合條件？以及輸入是否正確？如果不符合條件或者輸入不正確，會分別給出明確的錯誤提示。

當用戶點擊電話號碼文本框的時候，第一步先檢查密碼框和驗證碼框是否出現為空的錯誤提示，如果是，則清除為空的錯誤提示，注意是為空的錯誤提示；第二步檢查用戶輸入的是否為空或者不符合手機號碼格式，如果出現這種情況，就給用戶明確的錯誤提示，如果輸入的是11位數字且符合手機號碼規范，就清除錯誤提示。

那么問題來了，在第一步中我為什么要去清除密碼框或者驗證碼框中為空的錯誤提示呢？我想你也注冊過，你也不想在注冊的過程中看見一大串紅色的錯誤提示吧，看見都煩了。至于為什么只是清除為空的錯誤提示，因為如果你把其他錯誤提示刪了，用戶就會以為輸入的是正確，等點擊注冊的時候又得回去改一次。點擊密碼框就會去檢測上邊的手機號碼是否為空和自身是否為空和長度是否6位以上。在這里就不再對密碼框和驗證碼的驗證多做敘述了。

當所有條件都滿足時，點擊注冊按鈕會發送驗證碼并彈出一個輸入驗證碼的窗口，如下圖所示：

本來我是打算彈出窗口時不用經過“點擊獲取”就可以進行倒計時的，我把這個功能寫在頁面載入時，但是每次開始倒計的時間都不一樣，懇請各位大佬指點下。

至于登錄部分跟注冊部分也差不了多少，各位看官可以看一下上邊的原型鏈接，附帶流程圖哦。

第二部分：介紹部分功能的實現

1.?隨機驗證碼的生成

（1）首先先設置一個全局變量random_str，全局變量的值為ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789。

（2）然后在密碼框上邊放置一個文本標簽，在頁面載入時設置文本標簽的值。

random_str.substr(random_str.length*Math.random(),1) 表示隨機獲取某個字符，所以連續獲取四個就組成一個隨機驗證碼了。

2.?彈出輸入手機短信驗證窗口

創建兩個動態面板，把其中一個動態面板設置背景色跟透明度后置于注冊登錄頁面上，設置固定于瀏覽器，起到一個遮蓋的作用。另一個動態面板就充當彈出窗口。

3.?倒計時的實現

（1）首先拉出一個按鈕和動態面板(包含兩個狀態)

（2）設置一個全局變量，表示你要倒計的時間。

（3）點擊“點擊獲取”按鈕，觸發循環遍歷動態面板事件，且每次間隔一秒，并把按鈕設置為禁用。

（4）設置動態面板的狀態改變事件。當狀態改變時，判斷全局變量是否大于0，如果大于0則設置讓全局變量自減，然后把全局變量復制給按鈕的文本值。

好了，到此介紹完畢，如果有錯誤的地方，歡迎批評指正。

作者：calmlee，一名立志從事產品崗位的大四學生。坐標：廣州。郵箱：1935757072@qq.com

本文由 @calmlee 原創發布于人人都是產品經理。未經許可，禁止轉載。