調整手機輸入格式

index.html

@@ -323,7 +323,7 @@
 
               <div class="mb-3">
                 <label for="phone" class="form-label">手機*</label>
-                <input type="tel" class="form-control" id="phone" placeholder="請輸入手機號碼 0900-000-000" maxlength="12">
+                <input type="tel" class="form-control" id="phone" placeholder="請輸入手機號碼" maxlength="13">
                 <div class="phone invalid-feedback">
                   請輸入完整手機號碼，不超過 10 字元
                 </div>
@@ -2032,6 +2032,24 @@
       }, 250); // 延遲 250 毫秒後觸發
     });
 
+    // 將手機調整為 E.164 電話格式
+    document.getElementById('phone').addEventListener('input', function (e) {
+      let input = e.target.value;
+
+      // 去除所有非數字字符 (只保留數字)
+      let numericInput = input.replace(/\D/g, '');
+
+      // 判斷號碼並轉成 E.164 電話格式
+      if (/^09\d{8}$/.test(numericInput)) {
+        // 若格式為 09XXXXXXXX 轉成 +8869XXXXXXXX
+        e.target.value = `+886${numericInput.slice(1)}`;
+      } else if (/^09\d{2}-\d{3}-\d{3}$/.test(input)) {
+        // 若格式為 09XX-XXX-XXX 轉成 +8869XXXXXXXX
+        let cleanedInput = numericInput.slice(1);
+        e.target.value = `+886${cleanedInput}`;
+      }
+    });
+
     let translateUp = 0;
     let translateDown = -imageHeight; // 起始為第二張圖片
     const slider_1 = document.querySelector('.img-slider [data-anime="infinite-01"]');
@@ -2078,8 +2096,9 @@
 
     // 正則表達式規則
     //let nameRegex = /^[\u4e00-\u9fa5a-zA-Z]{1,10}$/; // 中英文字，最長 10 字元
+    // let phoneRegex = /^09\d{2}-\d{3}-\d{3}$/; // 格式 09XX-XXX-XXX
     let nameRegex = /^[\u4e00-\u9fa5a-zA-Z ]{1,10}$/;
-    let phoneRegex = /^09\d{2}-\d{3}-\d{3}$/; // 須符合 0900-000-000 格式
+    let phoneRegex = /^\+886\d{9,12}$/; // 格式 +8869XXXXXXXX (E.164)
     let emailRegex = /^(?:\s*|[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})$/; // email 格式
     let areaRegex = /^(?!0$)(?!0\.0$)(?:\d{1,3}(?:\.\d{1,2})?|1000(?:\.0{1,2})?)$/; // 可包含小數點符號，不可為「0」，下限為「1」，上限為「1000」
 
@@ -2116,20 +2135,20 @@
       }
     }
 
-    // 調整為 E.164 電話格式
-    function formatPhoneNumberToE164(phoneNumber, countryCode) {
-      // 移除所有非數字字符
-      const cleaned = phoneNumber.replace(/\D/g, '');
+    // // 調整為 E.164 電話格式
+    // function formatPhoneNumberToE164(phoneNumber, countryCode) {
+    //   // 移除所有非數字字符
+    //   const cleaned = phoneNumber.replace(/\D/g, '');
 
-      // 移除電話號碼開頭的「0」
-      const withoutLeadingZero = cleaned.replace(/^0+/, '');
+    //   // 移除電話號碼開頭的「0」
+    //   const withoutLeadingZero = cleaned.replace(/^0+/, '');
 
-      // 號碼以 + 開頭並加上國碼
-      if (!withoutLeadingZero.startsWith(countryCode.replace('+', ''))) {
-        return `${countryCode}${withoutLeadingZero}`;
-      }
-      return `+${withoutLeadingZero}`;
-    }
+    //   // 號碼以 + 開頭並加上國碼
+    //   if (!withoutLeadingZero.startsWith(countryCode.replace('+', ''))) {
+    //     return `${countryCode}${withoutLeadingZero}`;
+    //   }
+    //   return `+${withoutLeadingZero}`;
+    // }
 
     // 驗證所有欄位
     function validateAllFields(fields) {
@@ -2217,8 +2236,8 @@
         return;
       }
 
-      const countryCode = "+886"; // 台灣國家代碼
-      phone = formatPhoneNumberToE164(phone, countryCode);
+      // const countryCode = "+886"; // 台灣國家代碼
+      // phone = formatPhoneNumberToE164(phone, countryCode);
 
       let data = {
         name: name, // 姓名