多重條件組合查詢（一）：前端表單設計與 JavaScript 驗證

需求場景

鐘表公司訂單系統：使用者可依「訂單編號」、「配件類別」、「價格區間」任意組合，並以「且/或」邏輯連結，快速篩選記錄。

資料表結構

CREATE TABLE orders (
  no   CHAR(10),    -- 訂單編號
  type VARCHAR(20), -- 類別：機芯/表殼/表帶
  name VARCHAR(50), -- 名稱
  qty  INT,         -- 數量
  price DECIMAL(8,2) -- 價格
);

查詢表單 search.htm 完整結構

<form action="searchjg.php" method="POST" name="search" onsubmit="return validateForm()">
  <table align="center" border="1" width="400">
    <tr>
      <td width="100">訂單編號</td>
      <td><input type="text" name="no"></td>
    </tr>
    <tr>
      <td width="200">
        <select name="select1">
          <option value="1" selected>不限</option>
          <option value="2">或者</option>
          <option value="3">而且</option>
        </select> 類別為
      </td>
      <td>
        <select name="type">
          <option value="" selected>請選擇</option>
          <?php
          // 從資料庫動態載入不重複類別
          $res = mysql_query("SELECT DISTINCT type FROM orders");
          while ($row = mysql_fetch_row($res)) {
              echo "<option value='{$row[0]}'>{$row[0]}</option>";
          }
          ?>
        </select>
      </td>
    </tr>
    <tr>
      <td>
        <select name="select2">
          <option value="1" selected>不限</option>
          <option value="2">或者</option>
          <option value="3">而且</option>
        </select> 價格位在
      </td>
      <td>
        <select name="price">
          <option value="" selected>請選擇</option>
          <option value="1">50 以下</option>
          <option value="2">50~200</option>
          <option value="3">200 以上</option>
        </select> 的配件
      </td>
    </tr>
    <tr><td colspan="2" align="right"><input type="submit" value="開始查詢"></td></tr>
  </table>
</form>

JavaScript 客戶端驗證 validateForm()

<script>
function validateForm() {
    const f = document.search;
    // 若選擇了「類別」邏輯（非不限），則訂單號必填
    if (f.select1.value != '1' && f.no.value.trim() === '') {
        alert('請輸入訂單號碼！');
        f.no.focus(); return false;
    }
    // 若選擇了「價格」邏輯（非不限），則類別必選
    if (f.select2.value != '1' && f.price.value === '') {
        alert('請選擇價格區間！');
        f.price.focus(); return false;
    }
    // 同理：若填了訂單號但未選類別邏輯，提醒選擇
    if (f.no.value.trim() !== '' && f.select1.value == '1') {
        alert('請選擇配件類別邏輯（或者/而且）！');
        f.select1.focus(); return false;
    }
    return true;
}
</script>

設計要點總結

1. 邏輯運算子下拉選單：select1 控制「訂單號 與 類別」關係，select2 控制「前兩組 與 價格」關係，值 1=不限/不參與、2=OR、3=AND。
2. 動態載入類別選項：SELECT DISTINCT type FROM orders 確保選單與資料同步。
3. 客戶端預檢：避免空查詢送達伺服器，提升使用者體驗；但伺服端必須再次驗證。
4. 表單命名規範：name="search" 配合 document.search 存取，現代建議用 document.forms.search 或 document.getElementById。

安全性與現代化建議

• CSRF 保護：表單加入隱藏 csrf_token，伺服端驗證。
• 前端框架化：Vue/React 管理表單狀態，驗證規則集中化（如 Yup、Zod）。
• API 化：表單提交改為 fetch('/api/orders/search', {method:'POST', body:JSON.stringify(data)})，後端回傳 JSON，前端渲染表格。
• 無障礙：<label> 綁定輸入框，aria-required 標記必填欄位。

總結

本篇建立了多條件查詢的前端介面：三欄位、兩組邏輯運算子、動態類別選單、JS 預檢。後端處理（searchjg.php）詳見下篇，核心在於根據這四個參數（no, type, select1, select2, price）動態組裝 SQL WHERE 子句。