本系列帶你進入 jQuery 精彩世界，分享實戰經驗與解決方案。本期聚焦兩大高頻需求插件：**表單驗證**與**自動完成提示**（類 Google Suggest）。

為何選擇插件而非自寫？

研究他人作品耗時且痛苦（文檔常不系統、需深挖實例才懂作者思路）。jQuery UI 解決基礎問題，但複雜業務仍需專用插件。站在巨人肩膀上，不僅用現成功能，更能學習「如何封裝設計 JS 組件」。優秀插件代碼結構與設計思想，往往揭示腳本高手與架構師的差距。

表單驗證插件：Validate

選型理由

對比多款後選定：使用簡單、靈活度高、社區活躍。
官網：bassistance.de | 文檔：docs.jquery.com

完整實戰示例

<form id="commentForm" method="get" action="">
  <fieldset style="width:500px;"><legend>表單驗證</legend>
    <p><label for="cname" class="slabel"><em class="textred">*</em> 姓名:</label>
    <input id="cname" name="name" size="25" class="required" minlength="2" /></p>
    <p><label for="cemail" class="slabel"><em class="textred">*</em> E-Mail:</label>
    <input id="cemail" name="email" size="25" /></p>
    <p><label for="curl" class="slabel">網址:</label>
    <input id="curl" name="url" size="25" class="url" value="" /></p>
    <p><label for="ccomment" class="slabel"><em class="textred">*</em> 內容:</label>
    <textarea rows="2" id="ccomment" name="comment" cols="20" class="required" style="height:80px;"></textarea></p>
    <p style="text-align:center;"><input class="submit" type="submit" value="提交" /></p>
  </fieldset>
</form>

<script>
$("#commentForm").validate({
  errorClass: "error",
  submitHandler: function(form) {
    alert("submitted!"); // 實際提交用 form.submit()
  },
  rules: {
    email: { required: true, email: true }
  },
  messages: {
    email: { required: "需要輸入電子郵箱", email: "電子郵箱格式不正確" }
  }
});
</script>

核心機制解析

• 驗證方法：如 email() 返回 boolean。源碼採用正則 /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i。
• 類別驗證：輸入框加 class="required email" 即聲明式驗證，零 JS 配置。
• 自定義規則：$.validator.addMethod("custom", fn, "提示")。
• 遠程驗證：remote: "check-email.php" 自動 AJAX 校驗。
• 錯誤佈局控制：errorPlacement、errorElement、wrapper 精準控制提示 DOM 結構。

自動完成插件：Autocomplete

（原文此處後續內容截斷，補充核心用法）

$("#city").autocomplete({
  source: function(request, response) {
    $.getJSON("cities.php", { term: request.term }, function(data) {
      response($.map(data, function(item) {
        return { label: item.name, value: item.name, id: item.id };
      }));
    });
  },
  minLength: 2,
  select: function(event, ui) {
    $("#city_id").val(ui.item.id);
  }
});

插件學習心法

1. 先讀文檔 Options/Methods/Events 三板斧。
2. 跑通官方 Demo，再按專案需求微調。
3. 閱讀源碼核心流程（_create、_init、事件綁定、銷毀），學習組件封裝模式。
4. 遇 Bug 先搜 Issue，再嘗試 PR，養成開源思維。

掌握這兩大插件，覆蓋 80%+ 表單交互場景。下期預告：jQuery UI Widget Factory 打造屬於你的組件庫。