Axure RP 實現登錄用戶校驗的三種方式

使用Axure實現用戶登錄時，對用戶名和密碼的校驗。在此先給出一個登錄界面，所需主要元件爲：文本輸入框、登錄按鈕等。

• 如果用戶不存在，則提示用戶不存在信息；
• 如果用戶賬戶輸入正確，密碼錯誤，則提示該用戶的密碼輸入錯誤；
• 如果均輸入正確則進入到相對應的個人中心界面。
• 高級要求：在以上基礎要求達到的情況下，實現對不同用戶名和對應密碼的校驗。

    首先爲頁面元件定義標籤：可參考如下界面示意圖（logo來自互聯網僅用於學習交流請勿商用）

圖1:登錄頁面

用戶名稱輸入文本框定義標籤爲：name

密碼輸入文本框定義標籤爲：pwd

空白處拖入label元件定義爲：msg（用於顯示提示信息）

    第一種實現方法：直接校驗文字賦值

    選擇元件【登錄】按鈕，添加動作【鼠標單擊時】，編輯條件如下圖2所示：

圖2：admin的判斷條件

    同理爲密碼添加判斷條件：

圖3：爲密碼添加判斷條件

    以上條件的添加均爲不包含條件約束，因爲在Axure中不能支持嵌套的if……else判斷，因此這裏的條件均設置爲在不滿足某某條件的基礎上，提示異常信息，否則就可通過校驗而進入登錄的用戶中心。

    

    當不滿足用戶名爲admin的條件下，設置提示信息msg的文字爲“錯誤：無效的用戶名”；然後清空name的文本框和pwd的文本框；設置焦點在name上。另外在下圖中也添加了信息錯誤時的面板抖動效果，添加線性移動位移。

    當用戶名輸入爲admin後，密碼輸入錯誤，設置提示信息msg的文本爲“錯誤：[[Cname]]的密碼不正確”,然後清空pwd文本輸入框，設置焦點於此密碼輸入框中。

圖4：交互動作

     我們注意到，在上面的密碼錯誤提示上出現了一個局部變量"Cname",這是因爲我們要獲取的是所輸入的用戶的密碼，如果只用一個用戶，那麼可以不用設置該局部變量，直接寫“錯誤：admin的密碼不正確”，但是當我們要判斷多個用戶的時候，設置局部變量就可以根據輸入的用戶名來顯示該用戶的錯誤密碼提示了。

圖5：密碼局部變量設置和富文本編輯提示信息

    第二種實現方式：設置全局變量判斷非法性

    在菜單欄點擊【項目】菜單選擇【全局變量】彈出如下對話框：點擊【+】添加兩個全局變量，變量名稱分別爲username和password，默認值設置爲admin和123456。

    

圖6：設置全局變量

    爲【登錄】添加動作，單擊時的條件設置，仍然設置的是不滿足的條件下做何種操作。

    元件name（即用戶名文本輸入框）不包含變量username；

    元件pwd（即密碼文本框）不包含變量password

圖7：全局變量的使用

圖8：全局變量的使用

    設置密碼錯誤提示的信息同第一種處理方式，設置局部變量或者靜態文本顯示。其他動作的的設置均同第一種方式中所述。

    至此，這兩種方式實現的均是在同一個用戶和密碼的情況下進行條件判斷，如果非法提示錯誤信息，如果合法則進入主頁面。

    第三種實現方式：多用戶的校驗

    如果要實現多用戶的判斷，那麼這裏有一種方式通過全局變量的格式校驗，來實現類似於數據庫的匹配效果。假設定義用戶和密碼分別admin:123456；zhangsan:111；lisi:222三個用戶，當輸入不存在的用戶名時提示用戶用不存在，當輸入存在的用戶名時，要匹配相對應的密碼是否正確。

   首先定義全局變量userData，默認值定義爲(admin:123456)(zhangsan:111)(lisi:222)，解釋一下爲什麼要設置這樣的默認值，我們可以根據“左括號+用戶名+冒號+密碼+右括號”的形式來達到校驗的目的。

圖9：設置多用戶的全局變量

    在【登錄】按鈕上添加動作：

    判斷不包含條件：首先定義局部變量n1，n1的值就是當前name輸入後獲取的值，用“左括號+n1+冒號”來判斷我們之前定義的全局變量userData中是否包含這樣的數據格式，以達到校驗用戶名的目的。

圖10：設置局部變量校驗

    注意：所有的變量，無論是局部變量還是全局變量，格式書寫均要用兩層方括號括起來，如[[變量名]]格式。

    密碼的設置稍微不同，定義兩個局部變量n2和p2用於獲取name和pwd的當前值，使用“左括號+n2+冒號+p2+右括號”來判斷是否滿足userData的包含條件。如圖11。

圖11：設置局部變量校驗

    條件判斷設置完成後，動作設置同前兩種處理方式，設置提示信息和焦點。如圖12。

圖12：動作設置

   判斷完成所有的不滿足條件後，繼續添加用例，第三個用例不用添加任何判斷條件，只添加動作跳轉到用戶中心頁面即可。

    支持三種方式實現用戶登錄時的校驗已描述完畢。

    小結：Axure對條件的判斷不支持嵌套，因此通過不滿足條件的判斷能更方便的實現條件判斷效果；設置局部變量用來獲取用戶所輸入的當前值，如密碼提示的設置；多用戶的判斷可以通過特定的格式判斷來實現交互效果上的校驗。