[JQuery] jQuery 實用入門 表單篇

<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>

/* 頁面 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();

})