[jQ]左搖右晃式的欄位檢驗提示

作者：男丁格爾 | 日期：2009-11-10 | 分類：jQuery 應用 | 瀏覽：9,520 | 留言：10

當我們在申請一些網站的會員時，都有些必填的欄位要輸入一些符合規則的值，如果沒填或是填錯的話，該欄位旁邊可能會有紅色星號或是其它醒目的提示訊息。

form_verify_shake_1

這是還蠻常看到的提示方式。不過筆者現在要教各位如何讓這樣的提示效果變的更明顯有趣。

首先準備好 HTML：

?檢視原始碼 HTML
1
2
3
4
5
6
7
8
9
10

<body>
	<div class="form">
		<select name="abgne" class="animateField">
			<option value="">請選擇你的專長</option>
			<option value="jQuery">jQuery</option>
		</select>
 
		<input type="text" name="tw" class="animateField" />
	</div>
</body>

筆者就用一個下拉選單及輸入框來當範例使用，而為了讓它能支援"搖晃"的功能，因此需要特別設定 position：

?檢視原始碼 CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.form {
	position: relative;
}
.animateField {
	position: absolute; /* 要設成 absolute */
	top: 30px;
	border: 1px solid #000;
}
select.animateField {
	top: 0;
}
.error {	/* 用來當檢驗失敗時使用的樣式 */
	background: #ffd5d5;
	border: 1px solid #c30;
}

設定好之後，現在預覽還是一個在普通不過的表單，接著就是要靠我們的 jQuery 來加上檢驗判斷及效果唷：

?檢視原始碼 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

$(function(){
	// 左搖右晃時的速度
	var speed = 30;
 
	// 當失去焦點時進行判斷
	$('.animateField').blur(function(){
		// 先把目前元素轉換成 jQuery 物件後記錄起來
		var _this = $(this);
		// 先移除掉已附加的 .error 樣式
		_this.removeClass('error');
 
		// 如果值為空白時...
		if(_this.val() == ''){
			// 加上 .error 樣式
			// 接著開始左搖右晃
			_this.addClass('error').animate({
				left: '-=3px'
			}, speed).animate({
				left: '+=6px'
			}, speed).animate({
				left: '-=6px'
			}, speed).animate({
				left: '+=6px'
			}, speed).animate({
				left: '-=6px'
			}, speed).animate({
				left: '+=6px'
			}, speed).animate({
				left: '-=6px'
			}, speed).animate({
				left: '+=6px'
			}, speed).animate({
				left: '-=3px'
			}, speed);
		}
	});
});

當下拉選單或是輸入框再取得焦點後又失去焦點時，程式就會進行內容的判斷，如果該欄位的值是空白的話，則表示沒通過我們的檢驗，因此就加上預先設定好的 .error 樣式，同時讓整個欄位左搖右晃。如果要加大搖晃的效果時，只要修改 left 值就可以了，但最後要記得搖回到原來的位置喔。

各位只要先點一下輸入框或下拉選單，接著再點網頁的其它位置後就能看到左搖搖右晃晃的效果了。

form_verify_shake_2

再看完範例後，是不是覺得這樣的提示很有趣呢！不過這樣的效果是不是需要就見人見智了，也許只是讓人噗哧一笑的功能而已。

範例瀏覽：
http://demonstration.abgne.tw/jquery/0012/0012.html

相關連結
推薦內容
標籤：, , ,
發表留言

如果有任何 jQuery 問題也可以直接到 討論區 中發文討論。
  1. 阿熊
    2009-11-13 13:35:53 回覆

    確實是滿有趣的O.O


  2. keung
    2009-11-22 06:07:08 回覆

    可惜firefox不支援呢?


    • 男丁格爾
      男丁格爾
      2009-11-22 17:58:07 回覆

      我試過 Firefox 是沒問題的.
      不知道你的版本是幾版呢?


  3. JUJEN
    2009-11-25 13:24:15 回覆

    呀~~我真的噗哧笑出來了~~XD


    • 男丁格爾
      男丁格爾
      2009-11-25 13:52:47 回覆

      哈~讓整個嚴謹的驗證過程中還能帶一點可愛的玩笑..!!


  4. keung
    2009-11-30 01:21:02 回覆

    版本是Firefox 3.5.5
    結果是我沒看清楚,
    以為滑鼠點了表單欄位沒反應。
    sorry!
    原來是要先點下拉選單再點表單
    或先點表單再點下拉選單才會動...


    • 男丁格爾
      男丁格爾
      2009-11-30 09:51:39 回覆

      呵~~這是當表單欄位失去焦點時才做驗證的.


  5. BearG
    2009-12-15 17:46:16 回覆

    請問，假如要在表單欄位按下submit時才做驗證該如何設定呢 ?


    • 男丁格爾
      男丁格爾
      2009-12-15 17:48:32 回覆

      那你就是要把事件寫在 form 的 submit 事件上囉, 例如：

      ?檢視原始碼 JavaScript
      1
2
3

      $(form).submit(function(){
	//驗證...
});

  6. robbie
    2010-08-23 21:21:01 回覆

    WordPress3 登录,密码错误 是同个效果耶~