一張保單輕鬆享有人生各階段風險保障
通通幫您規畫好
搬家公司您還敢使用滿是變種細菌的電話通話嗎
請定期電話清潔消毒,

首頁  •  j2h 論壇 • 程式設計討論     • 

[JQuery] jQuery 實用入門 表單篇

房東:油雞
發表時間:2011-10-12
[檢舉]


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


案例觀看範例


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


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




HTML 源碼











1
2
3
4
5
6
7
8
9
10
11
12
13


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











1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51


/* 頁面 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 來實做更齊全的資料驗證、友善的欄位資料輸入等以往需要大量程式碼的工作,增進設計上的生產效率呢。





  • 贊助網站       

    廣利不動產-新板特區指名度最高、值得您信賴的好房仲
    您的托付,廣利用心為您服務
    廣利不動產-板橋在地生根最實在--新板特區指名度最高、值得您信賴的好房仲
    完整房訊,房屋、店面熱門精選物件,廣利不動產 優質仲介,房屋租賃、買賣資訊透明,交易真安心!

  • 1 樓住戶:jack
    發表時間:2011-10-12
    [檢舉]


    在 jQuery 1.3 裡面正式拿掉 [@attr] 的寫法,所以以前寫 $(“input:radio[@name=reg_sex]“) 都要改成 $(“input:radio[name=reg_sex]“),這樣才是正確的



    if($(this).find("input[name=prices]").val() == ""){
    alert("抱歉: 請輸入");

    return false;
    }



     共 1 人回應  選擇頁數 【第1 頁】 

    姓名:
    佈告內容: