商用網站架設實務

LESSON-18 · solution

JavaScript 基礎：表單驗證與非同步概念

這一頁不是直接複製答案；先逐檔看差異、修改原因與驗收證據，再把需要的改動帶回自己的資料夾。 這頁用 可觀察證據 和 anchor 指出下一個動作。

Starter3 個小成果
Checkpoint一個核心缺口
Solution4 個差異

開始前確認

這一頁的結果：所有相關檔案可開啟或閱讀；沒有 TODO、CHECKPOINT 或 placeholder；能說明每個檔案為何改動

工作方式：先把這一階段複製到自己的工作資料夾，開啟 files/index.html，記下修改前的畫面、Elements、Console、網址列、status、disabled 與 aria-busy狀態。

會用到的檔案：index.html、contact.html、style.css、main.js

本堂焦點：掌握表單驗證、preventDefault 與非同步狀態流程

照這個順序做

一次只做一張卡。完成後先重新整理入口，再留下證據，才進入下一張。

差異 1

先把瀏覽器原生驗證需要的欄位、送出控制項與非同步結果位置建立完整。

目的

先把瀏覽器原生驗證需要的欄位、送出控制項與非同步結果位置建立完整。

修改檔案

contact.html

程式碼位置

contact-form fields and status

現在要做：先對照差異，再檢查 在 contact.html 的「contact-form fields and status」對照這項變更：<form id="contact-form"> <label for="name">姓名</label> <input id="name" name="name" autocomplete="name" required> <label for="email">Email</label> <input id="email" name="email" type="email" autocomplete="email" required> <label for="message">需求</label> <textarea id="message" name="message" required></textarea> <button id="submit-button" data-submit-control type="submit">送出</button> <p id="status" role="status" aria-live="polite" data-state="idle">idle：尚未送出</p> </form>

貼上位置：contact.html 的 contact-form fields and status 區塊

<form id="contact-form">
  <label for="name">姓名</label>
  <input id="name" name="name" autocomplete="name" required>

  <label for="email">Email</label>
  <input id="email" name="email" type="email" autocomplete="email" required>

  <label for="message">需求</label>
  <textarea id="message" name="message" required></textarea>

  <button id="submit-button" data-submit-control type="submit">送出</button>
  <p id="status" role="status" aria-live="polite" data-state="idle">idle：尚未送出</p>
</form>

預期結果：contact.html 有一個表單、三個帶 label 的 required 欄位、submit button 與 #status；空白送出會先出現原生驗證提示。

驗收證據：Elements 的 form／label／input／textarea 巢狀關係、for 與 id 對照、#status 的 role 與空白送出驗證提示。

卡住時先看這裡

常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。

第一個檢查：只對照目前差異指定的檔案與 anchor。

差異 2

先把表單送出事件接到 JavaScript 的處理函式；保留 Checkpoint 的單一缺口，讓學生能看見 preventDefault 應該放在 callback 內。

目的

先把表單送出事件接到 JavaScript 的處理函式；保留 Checkpoint 的單一缺口，讓學生能看見 preventDefault 應該放在 callback 內。

修改檔案

main.js

程式碼位置

submit callback

現在要做：先對照差異，再檢查 在 main.js 的「submit callback」對照這項變更：const form = document.querySelector("#contact-form"); function handleSubmit(event) { event.preventDefault(); runSubmission(false); } if (form) form.addEventListener("submit", handleSubmit);

貼上位置：main.js 的 submit callback 區塊

const form = document.querySelector("#contact-form");

function handleSubmit(event) {
  event.preventDefault();
  runSubmission(false);
}

if (form) form.addEventListener("submit", handleSubmit);

預期結果：submit callback 會被觸發並開始本地 mock 的 loading 流程；Checkpoint 前仍會沿用瀏覽器預設送出。

驗收證據：填妥欄位後送出，觀察網址導覽與程式碼中的 submit callback；不要把表單欄位內容寫入 Console。

卡住時先看這裡

常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。

第一個檢查：只對照目前差異指定的檔案與 anchor。

差異 3

理解 Promise 等待期間的 loading、成功與失敗回饋，以及 finally 如何確保送出按鈕恢復可用。

目的

理解 Promise 等待期間的 loading、成功與失敗回饋，以及 finally 如何確保送出按鈕恢復可用。

修改檔案

main.js

程式碼位置

async lifecycle

現在要做：先對照差異，再檢查 在 main.js 的「async lifecycle」對照這項變更：function mockSubmit(shouldFail) { return new Promise((resolve, reject) => { window.setTimeout(() => { if (shouldFail) reject(new Error("mock failure")); else resolve(); }, 350); }); } async function runSubmission(shouldFail) { setStatus("正在等待 mock 結果", "loading"); setLoading(true); try { await mockSubmit(shouldFail); setStatus("測試詢問已收到", "success"); } catch { setStatus("模擬失敗，請保留輸入後重試", "error"); } finally { setLoading(false); } }

貼上位置：main.js 的 async lifecycle 區塊

function mockSubmit(shouldFail) {
  return new Promise((resolve, reject) => {
    window.setTimeout(() => {
      if (shouldFail) reject(new Error("mock failure"));
      else resolve();
    }, 350);
  });
}

async function runSubmission(shouldFail) {
  setStatus("正在等待 mock 結果", "loading");
  setLoading(true);
  try {
    await mockSubmit(shouldFail);
    setStatus("測試詢問已收到", "success");
  } catch {
    setStatus("模擬失敗，請保留輸入後重試", "error");
  } finally {
    setLoading(false);
  }
}

預期結果：送出後 status 先顯示 loading 並停用控制項；本地 mock Promise resolve 時顯示 success，reject 時顯示 error，finally 讓控制項恢復且不清空輸入。

驗收證據：status 的時間順序、控制項 disabled 前後狀態、data-state、aria-busy 與輸入欄位在結果後仍保留。

卡住時先看這裡

常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。

第一個檢查：只對照目前差異指定的檔案與 anchor。

差異 4

讓 JavaScript 接手表單後保留目前頁面，非同步狀態才有機會完整呈現。

目的

讓 JavaScript 接手表單後保留目前頁面，非同步狀態才有機會完整呈現。

修改檔案

main.js

程式碼位置

submit callback

現在要做：先對照差異，再檢查 在 main.js 的「submit callback」對照這項變更：event.preventDefault();

貼上位置：main.js 的 submit callback 區塊

event.preventDefault();

預期結果：送出後網址不變，status 能依序顯示 loading 與 mock success/error，輸入內容仍保留。

驗收證據：Network 沒有新的 document 導覽、status 與按鈕 disabled 的時間順序可觀察。

卡住時先看這裡

常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。

第一個檢查：只對照目前差異指定的檔案與 anchor。

階段檔案

完整檔案收在可展開的卡片中；先完成上方微步驟，再用這裡查閱與複製。檔案位置要和目前的相對路徑一致。

開啟 solution 的可執行入口

index.html階段入口：說明本階段結果，並以真實相對路徑連到 contact.html。

這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。

​
<!doctype html>
<html lang="zh-Hant">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JavaScript 基礎：表單驗證與非同步概念</title>
<link rel="icon" href="../../../assets/favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="site-header"><a class="brand" href="index.html">安心維護</a><span class="single-page-label">本堂單頁練習</span></header>
<main class="page-shell">
<p class="eyebrow">LESSON-18 · 掌握表單驗證、preventDefault 與非同步狀態流程</p>
<h1>JavaScript 基礎：表單驗證與非同步概念</h1>
<p class="page-description">掌握表單驗證、preventDefault 與非同步狀態流程</p>
<!-- lesson-slot -->
<section class="result-card" aria-labelledby="result-title"><h2 id="result-title">本階段入口</h2><p id="status" class="status" role="status" aria-live="polite" data-state="idle">idle：請開啟聯絡表單開始測試</p><p>這頁只負責說明入口；真正的 form、欄位與狀態流程在同資料夾的 contact.html。</p><p><a class="button-link" href="contact.html">開啟聯絡表單</a></p></section><section class="result-card"><h2>本階段要觀察</h2><p>完整示範原生驗證、preventDefault、Promise mock、success/error 與可恢復的 loading lifecycle。</p></section>
</main>
<script src="main.js" defer></script>
</body>
</html>
contact.html表單頁：提供 label、欄位、原生驗證、submit 與狀態觀察位置。

這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。

​
<!doctype html>
<html lang="zh-Hant">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>聯絡表單與狀態</title>
<link rel="icon" href="../../../assets/favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="site-header"><a class="brand" href="index.html">安心維護</a><span class="single-page-label">本堂單頁練習</span></header>
<main class="page-shell">
<p class="eyebrow">LESSON-18 · 掌握表單驗證、preventDefault 與非同步狀態流程</p>
<h1>聯絡表單與狀態</h1>
<p class="page-description">掌握表單驗證、preventDefault 與非同步狀態流程</p>
<!-- lesson-slot -->
<section class="result-card"><p class="eyebrow">LESSON-18 · solution</p><h2>表單驗證與非同步狀態</h2><p>先測試空白驗證，再測試 success／error；每次只看一個證據。</p><form id="contact-form" action="contact.html" method="get"><div class="field"><label for="name">姓名</label><input id="name" name="name" required></div><div class="field"><label for="email">Email</label><input id="email" name="email" type="email" required></div><div class="field"><label for="message">需求</label><textarea id="message" name="message" required></textarea></div><button id="submit-button" data-submit-control type="submit">模擬成功送出</button><button id="fail-button" data-submit-control class="secondary" type="button">模擬失敗</button><p id="status" class="status" role="status" aria-live="polite" data-state="idle">idle：尚未送出</p></form><p><a href="index.html">回到階段入口</a></p></section>
</main>
<script src="main.js" defer></script>
</body>
</html>
style.css呈現層：提供表單欄位、status、disabled、focus 與窄版可讀性。

這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。

​
:root { font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans TC", sans-serif; color: #17324d; background: #f5f8fb; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; line-height: 1.7; }
.site-header { width: min(100% - 2rem, 760px); margin: 1rem auto 0; padding: .75rem 0; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.site-header a { color: #155e75; }
.page-shell { width: min(100% - 2rem, 760px); margin: 2rem auto; padding: 2rem; border: 1px solid #cbd8e4; border-radius: 20px; background: #fff; }
.eyebrow { color: #176b87; font-weight: 800; letter-spacing: .05em; }
.page-description { color: #52657d; }
.result-card { margin-top: 1rem; padding: 1rem; border: 1px solid #d8e0ea; border-radius: 14px; background: #fbfdff; }
.field { display: grid; gap: .35rem; margin-top: 1rem; }
input, textarea, button { font: inherit; }
input, textarea { width: 100%; padding: .65rem; border: 1px solid #9fb2c5; border-radius: .5rem; }
textarea { min-height: 6rem; resize: vertical; }
button, .button-link { display: inline-block; margin: 1rem .5rem 0 0; padding: .65rem .9rem; border: 0; border-radius: 9px; background: #176b87; color: #fff; text-decoration: none; cursor: pointer; }
button.secondary { background: #64748b; }
button:disabled { cursor: wait; opacity: .55; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #f1ab2c; outline-offset: 3px; }
.status { min-height: 2rem; font-weight: 700; }
.status[data-state="success"] { color: #17643d; }
.status[data-state="error"] { color: #b42318; }
@media (max-width: 560px) { .site-header { align-items: flex-start; flex-direction: column; } .page-shell { margin: 1rem auto; padding: 1rem; } h1 { font-size: 1.6rem; } }
main.js行為層：處理 submit、preventDefault、mock Promise 與 idle/loading/success/error 狀態。

這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。

​
const form = document.querySelector("#contact-form");
const status = document.querySelector("#status");
const controls = document.querySelectorAll("[data-submit-control]");
const failButton = document.querySelector("#fail-button");

function setStatus(message, state) {
  status.dataset.state = state;
  status.textContent = state + "：" + message;
}

function setLoading(isLoading) {
  controls.forEach((control) => { control.disabled = isLoading; });
  if (form) form.setAttribute("aria-busy", String(isLoading));
}

function mockSubmit(shouldFail) {
  return new Promise((resolve, reject) => {
    window.setTimeout(() => {
      if (shouldFail) reject(new Error("mock failure"));
      else resolve();
    }, 350);
  });
}

async function runSubmission(shouldFail) {
  setStatus("正在等待 mock 結果", "loading");
  setLoading(true);
  try {
    await mockSubmit(shouldFail);
    setStatus("測試詢問已收到", "success");
  } catch {
    setStatus("模擬失敗，請保留輸入後重試", "error");
  } finally {
    setLoading(false);
  }
}

function handleSubmit(event) {
  event.preventDefault();
  runSubmission(false);
}

if (form) form.addEventListener("submit", handleSubmit);
if (failButton) failButton.addEventListener("click", () => runSubmission(true));

完成驗收

下一步

Solution 對照完成後，回到 README 整理證據，並準備下一堂課的先備知識。

回到 README，整理本堂證據並銜接下一堂