D58_W7 作業一任務拆解

• 可惡還是沒有寫完啊啊啊，明天繼續...

1.1 hw1 留言板任務：

「input 為空或 check 沒勾跳紅字，不然就 alert 所有填寫資料」

影片：參考範例：hw1 表單驗證（請先寫完作業再看）

參考範例：hw1 表單驗證（請先寫完作業再看）

• 遇到的問題：

  • 我在寫 input 欄位的時候，把手機號碼設為 type="tel", 電子郵件設為 type="email"，當我照著老師的邏輯做時，我當然抓不到所有 type="text" 的東西，因為一開始做的有問題

• 檢查所有必要輸入欄位是否為空

  • 如果為空，顯示紅字
  • 全部填完，顯示 alert

• 1'47": 先在 CSS 顯示紅字

• 3'00": 先偵測 submit 事件，addEventListener

  • 把事件放在 form 的送出功能 （submit） 上才對，只加在按鈕不行（因為按 enter 也可以送出），所以我們要阻止的是送出功能
  • 接著先阻止 submit 預設事件

• 5'00" 看表單有沒有填內容

  • 去拿 required 底下的 text
  • checkbox 額外處理，因為性質不同

• 7'30" 修表單 html 結構，required 要在上一層，才能取到 required 底下的東西

• 8'15" 操作 input 的資料

• 9'00" 沒有填就加錯誤訊息

• 12'50" 沒有填就加錯誤訊息，比較好的做法

  • 13'38" 先在 html 加上想要顯示的訊息
  • 14'00" hide error
  • 14'36" - 19'35" hide error + 調整高度
    • display: none and visibility: hidden
    • 用 visibility: hidden 就不會影響高度了，因為他本來就在畫面上，只是看不到而已

• 19'52": 拿到輸入訊息資料

• 21'45": 對 checkbox 做檢查

• 26'34": 兩種檢查方法的差別：

  • 找所有 required 底下的 input 判斷裡面有沒有值，找到 parent 加 css class，顯示或不顯示錯誤
  • 去找所有 required 的 div，往下找 radio

• 27'19" 重構程式碼

  • 找 required 底下的東西

• 32'20": 重整邏輯，重點是選對東西

• 34'30": alert 填好的資料

• 36'20": 整理邏輯

  • 對 form 加 submit 事件
  • 看欄位驗證沒有有過
  • 去找 required 元素
  • 底下元素如果是 input 把 value 放進去，反之則出現錯誤訊息
  • 如果是 radio，有就把 value 放進去
  • 最後面統一檢查有沒有過驗證
  • 38'30": 解釋擴充性