原型設計工具Axure RP入門教程（六）：必填字段教程

---

Axure RP是一套專門為網站或應用程序所設計的快速原型設計工具， 可以讓應用網站策劃人員或網站功能界面設計師更加快速方便的建立Web AP和Website的線框圖、流程圖、原型和規格。

免費下載Axure RP 優惠購買Axure RP

---

在本教程中，您將學習如何制作使用條件邏輯的注冊表單，以確保用戶已完成所有必填字段。

小部件和頁面設置

創建注冊表單

• 打開一個新的RP文件，然后在畫布上打開Page 1。
• 將兩個文本字段小部件拖動到畫布上。 命名一個文本字段電子郵件字段，另一個命名密碼字段。 （您可以選擇使用標簽小部件為每個標簽添加標簽。）

提示：要屏蔽密碼字段的文本，請將其輸入類型設置為密碼。

• 將按鈕小部件拖到畫布上，并將其文本設置為Sign Up。
• 將Heading 3小部件拖到畫布上。 將其文本設置為“請輸入電子郵件地址和密碼，并將其命名為錯誤消息”。
• 將錯誤消息的字體顏色更改為紅色，然后通過單擊樣式工具欄或樣式窗格中的隱藏圖標將其隱藏。

添加成功的注冊頁面

• 在項目中添加一個新頁面，并在畫布上打開它。
• 將標題1小部件拖到畫布上，并將其文本設置為謝謝您注冊！

成功的注冊案例

鏈接到第二頁

• 選擇注冊按鈕，然后在Interaction（交互）窗格中單擊Click（單擊）或Tap（點擊）→Open Link（打開鏈接）。
• 在出現的下拉菜單中選擇第2頁，然后單擊確定。

添加驗證文本字段的條件

• 將鼠標懸停在Interaction（交互）窗格中的Click（單擊）或Tap（點擊）標題上，然后單擊右側的Enable Cases（啟用案例）。
• 在出現的條件構建器對話框中，將案例命名為成功注冊，然后單擊Add Logic（添加邏輯）。
• 在出現的條件行中，在第二個下拉列表中選擇電子郵件字段文本字段，然后在第三個下拉列表中選擇不等于。
• 單擊添加行以添加另一個條件語句。 在第二個下拉列表中選擇密碼字段文本字段，然后在第三個下拉列表中選擇不等于。
• 對話框底部的摘要應顯示為：If text on Email Field does not equal "" and text on Password Field does not equal ""。 僅當單擊注冊按鈕時兩個文本字段都包含一些文本時，才能滿足此條件。
• 單擊確定關閉條件生成器。

注冊申請失敗

• 選中注冊按鈕后，將鼠標懸停在Interaction（交互）窗格中的Click（單擊）或Tap（點擊）標題上，然后單擊右側的Add Case（添加案例）。
• 在出現的條件構建器對話框中，將新案例命名為不成功注冊，然后單擊確定而不添加任何邏輯。

• 單擊Interaction（交互）窗格中新案例標題下方的插入操作圖標。
• 在出現的列表中選擇顯示/隱藏，然后定位錯誤消息小部件。 保持顯示處于選中狀態，然后單擊確定。

注意：即使我們沒有為這種情況設置條件，它的條件為ELSE IF true。如果第一種情況的條件不成立（如果一個或兩個文本字段為空），則將觸發此情況（也稱為默認情況）。

預覽互動

• 預覽頁面，然后單擊注冊按鈕。 由于文本字段為空，因此將出現錯誤消息。
• 在文本字段之一中輸入一些文本，然后再次單擊注冊按鈕。由于文本字段之一仍為空白，因此錯誤消息仍應可見。
• 最后，在第二個文本字段中輸入一些文本，然后再次單擊注冊按鈕。 現在，您應該將注冊成功的信息定向到第2頁。

附加信息和提示

文本字段為焦點時隱藏錯誤消息

如果您希望用戶單擊文本字段之一時再次隱藏錯誤消息，請為每個文本字段在獲得焦點事件下設置顯示/隱藏操作。

---

關注慧聚IT微信公眾號???，了解產品的最新動態及最新資訊。