iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 18
0
Modern Web

JavaScript 菜鳥研究室系列 第 18

菜鳥日記Day 18-如何驗證使用者姓名&電話(Post API-part 1)

  • 分享至 

  • xImage
  •  

當我們從「單一房型資料庫」擷取到房型資料並確認庫存後。
我們緊接著要將使用者姓名、電話、預約/退房日期等資訊傳到後台,進行房型預約。

步驟如下:
https://ithelp.ithome.com.tw/upload/images/20201002/201300397d6qxJyqbc.png
1.當我們擷取到單一房型資料後,我會在房型資料的頁面建立一個叫reserveButton的常數。此常數會綁定HTML頁一個叫reserveButton的id項目。
2.接下來我會監聽這個reserveButton,當使用者點擊它時,即觸發一個叫postData的函式。

https://ithelp.ithome.com.tw/upload/images/20201002/20130039Rsf3bWfjkw.png
當觸發postData函式後,執行下列動作
3.建立personName、personTel兩個常數,並對應到HTML頁相同名稱的id項目。
4.建立陣列常數booking並設定name、tel、date三物件為空值,準備存放使用者資料。
5.當personName等於空值時,顯示請填寫聯絡姓名
6.當personTel等於空值時,顯示請填寫手機號碼
7.當姓名與電話都有填寫時,陣列常數booking裡的name等於常數personName,tel等於personTel。
8.設定axios認證token預設值(固定語法)
9.以axios到預約房型的網站擷取資料,並將常數booking擷取到的值傳入其中
10.當陣列常數booking的值,成功傳入預約房型的資料庫時,顯示預約成功

因為日期的部分比較複雜,今天我們先討論如何將使用者姓名與電話傳到後台驗證。
明天將繼續探討預約日期與退房日期的驗證機制。


上一篇
菜鳥日記Day 17-設定函式category與roomDetails
下一篇
菜鳥日記Day 19-如何驗證日期(Post API-part 2)
系列文
JavaScript 菜鳥研究室30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言