今天打算了解表單驗證(JS)的功能，這是表單的必備功能，明天來實作。

目前目標是：

• 體重要大於 0
• 血糖要填數字
• 日期不能空白
• 送出前檢查，不符合就提醒

體重要大於0

1. 先將form賦予id，這樣才能在JS裡找到表單在HTML的部分

   <form id="recordForm">
   

2. 將下列合併到昨天寫的 script.js

   document.addEventListener("DOMContentLoaded", function () {
       const form = document.getElementById("recordForm");
       const weightInput = document.getElementById("weight");
   
       form.addEventListener("submit", function (event) {
           const weight = parseFloat(weightInput.value);
   
           // 判斷體重是否有效
           if (isNaN(weight) || weight <= 0) {
               alert("請輸入正確的體重（大於 0）");
               event.preventDefault(); // 阻止表單送出
           }
       });
   });
   

   • 尋找名為 recordForm 的表單
   • 找到體重的部分
   • 動作：weight 放入轉為浮點數 ( parseFloat ) 輸入 ( weightInput.value ) 的值
   • 寫入判斷式，如果輸入的體重小於等於0，表單不能送出

血糖要填數字

1. 設定血糖只能輸入數字與可接受範圍

   <label for="bf_glucose">餐前血糖：</label>
   <input type="number" id="bf_glucose" name="bf_glucose" min="50" max="400">
   
   <label for="af_glucose">餐後血糖：</label>
   <input type="number" id="af_glucose" name="af_glucose" min="50" max="400">
   

2. 將功能寫入script.js

   form.addEventListener("submit", function(event){
       const bfGlucose = parseFloat(document.getElementById("bf_glucose").value);
       const afGlucose = parseFloat(document.getElementById("af_glucose").value);
   
       // 餐前血糖驗證
       if(isNaN(bfGlucose) || bfGlucose < 50 || bfGlucose > 400){
           alert("請輸入正確的餐前血糖（50-400）");
           event.preventDefault();
           return;
       }
   
       // 餐後血糖驗證
       if(isNaN(afGlucose) || afGlucose < 50 || afGlucose > 400){
           alert("請輸入正確的餐後血糖（50-400）");
           event.preventDefault();
           return;
       }
   });
   

   • 尋找取得餐前、餐後血糖
   • 血糖判斷式，不符合範圍的，表單無法送除

日期不能空白

1. 在 label 為 date 加入 required，瀏覽器本身就會先檢查，沒填日期時按「送出」會跳提示。

       <label for="date">日期：</label>
       <input type="date" id="date" name="date" required>
   

2. 撰寫 js 功能部分程式碼

   form.addEventListener("submit", function(event){
       const date = document.getElementById("date").value;
   
       // 日期驗證
       if(!date){
           alert("日期不能空白！");
           event.preventDefault();
           return;
       }
   });
   

   • 找到 HTML date的部分
   • 如果是空白的，表單就不能送出

以上就是今天的內容，明天要來實作！