Home » jQuery 應用

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

[ 日期： | 瀏覽：26,460 | 迴響：12 ]
範例 1
請協助我把這個效果加到我的網站 (只要 600 元)
沒錯!只要 600 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!

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

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

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

範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

12 筆針對 [jQ]左搖右晃式的欄位檢驗提示 的迴響

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

  7. 男丁:
    請問一下,如果下拉式選單有三個選項,最後一項「其他」,選這個選項時才會出現下方的輸入框,其他選項都不會出現,該如何寫呢?

    • 建議這類的問題可以直接到討論區發問討論

      檢視原始碼 JavaScript
      1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

      <style type="text/css">
	.abgne {
		display: none;
	}
</style>
<script type="text/javascript">
	$(function(){
		$('.sel').change(function(){
			$('.abgne').toggle(this.value=='Other');
		});
	});
</script>
 
<body>
<select name="" class="sel">
	<option value="jQuery">jQuery</option>
	<option value="Other">Other</option>
</select>
 
<input type="text" name="" class="abgne" />
</body>

發表迴響