網頁 Form 表單可以有很多 Javascript 應用，比如說表單驗證、聚焦提示、防錯誤措施等等，而這些功能通常可以經由 jQuery 簡化程式寫法，以下就是本期案例。

案例

頁面讀取完成即聚焦於第一個表單元件，並加入聚焦提示，送出時驗證是否都有填寫資料，若無則浮現提示文字，表單送出後將 submit 按鈕停用。

這個案例使用了 jQuery 的語法串接特色: 將多個函式串接為一行，大大節省程式行數。

HTML 源碼

<form action="javascript:void(0);" id="form1">
    <div>
      <label for="uname">姓名：</label>
      <input type="text" name="uname" id="uname" class="input" />
      <span id="name_msg" class="msg"></span>
    </div>
    <div>
      <label for="pwd">密碼：</label>
      <input type="password" name="pwd" id="pwd" class="input" />
      <span id="pwd_msg" class="msg"></span>
    </div>
    <p><input type="submit" /></p>
  </form>

Javascript 源碼

/* 頁面 onload 事件 */
$(function(){

  /* 定義 boolean 變數，記錄是否驗證成功 */
  var flag = false;
  
  /* 加入 input 類型為 text, password 元件的聚焦事件 */
  $(":text, :password").focus(function(){
    /* 將這些物件聚焦時的 css 設為 1 像素的黑色邊框，底色為淡黃色 */
    $(this).css({border: "1px solid #000", background: "#ffea45"});
  });

  /* 加入 input 類型為 text, password 元件的失焦事件 */
  $(":text, :password").blur(function(){
    /* 將這些物件失焦時的 css 設為 1 像素的灰色邊框，底色為白色 */
    $(this).css({border: "1px solid #ccc", background: "#fff"});
  });

  /* 表單送出事件加入 submit 按鈕停用 */
  $("form").submit(function(){
  
    /* 驗證表單內命名為 uname 的元件是否有值，若無則顯示提示文字。
       ※這邊使用了 jQuery 的串接特色
       ※find 為尋找元素的函式 */
    if($(this).find("input[@name=uname]").val() == ""){
      $("#name_msg").html("請輸入姓名").css("color", "#f00").fadeIn();
      flag = false;
    }else{
      $("#name_msg").hide();
      flag = true;
    }
    
    /* 驗證表單內命名為 pwd 的元件是否有值，若無則顯示提示文字 */
    if($(this).find("input[@name=pwd]").val() == ""){
      $("#pwd_msg").html("請輸入密碼").css("color", "#f00").fadeIn();
      flag = false;
    }else{
      $("#pwd_msg").hide();
      flag = true;
    }
    
    /* 若驗證通過則停用 submit 按鈕，反之則取消送出 */
    if(flag)
      $(":submit").attr("disabled", "true");
    else
      return false;
  });
  
  /* 選擇第一個 input 元件，並加入聚焦（focus）事件 */
  $("input:first").focus();
})

很簡單吧？

使用 jQuery 設計表單功能不只大大縮短了開發時間，更可以藉由 Plugin 來實做更齊全的資料驗證、友善的欄位資料輸入…等，減少以往需要大量程式碼的工作，增進設計上的生產效率呢。

而下一期的重點即將介紹 Ajax 的開發範例，敬請期待。