攜程網(wǎng)頁版注冊頁面模型鏈接：https://b3xcbk.axshare.com

參考網(wǎng)頁為：攜程旅行網(wǎng)-會員注冊

該模型共有三個頁面——注冊頁面、設(shè)置密碼頁面和注冊成功頁面，實現(xiàn)了網(wǎng)頁的注冊和表單的交互。模型采用了向?qū)员韱?，明確地告訴用戶只需驗證手機和設(shè)置密碼即可完成注冊，同時用戶也可以看到現(xiàn)在處于注冊的哪個步驟。

在注冊頁面，我們實現(xiàn)了對表單的校驗，將輸入框轉(zhuǎn)換動態(tài)面板，當(dāng)校驗發(fā)生問題的時候改變輸入框動態(tài)面板改變狀態(tài)，并且實現(xiàn)了隱藏動態(tài)面板的顯示與拉動。例如，當(dāng)我們沒有輸入手機號或者手機號不是11位的時候點擊發(fā)送驗證碼，手機號矩形會轉(zhuǎn)換為黃底紅框，并且會出現(xiàn)下拉矩形，顯示“請輸入正確的手機號”。除此之外，實現(xiàn)了發(fā)送驗證碼之后開始計時，計時結(jié)束又可以重新發(fā)送驗證碼的交互，再次點擊發(fā)送驗證碼重新開始計時。在驗證完手機號格式與短信驗證碼格式后，點擊“下一步”進(jìn)入設(shè)置密碼頁面。

在設(shè)置密碼頁面，同樣可以對密碼和確認(rèn)密碼進(jìn)行校驗，同時可以在輸入的同時判斷密碼強度，點擊“完成”進(jìn)入注冊成功頁面。

收獲

1. 熟悉了交互用例的基本使用，熟悉條件的用法
2. 熟悉了動態(tài)面板的基本使用
3. 學(xué)會了使用全局變量

存在的問題

1. 注冊頁面的按鈕轉(zhuǎn)換為動態(tài)面板后添加超鏈接無法正常鏈接，但是注冊成功頁面的按鈕轉(zhuǎn)換為動態(tài)面板后可以，所以在注冊頁面就沒有實現(xiàn)移入的交互效果。
2. 滑塊驗證碼不是本次練習(xí)的重點，有空再填坑。