jQuery中的表单

表单一般分为3部分：表单标签、表单域与表单按钮

1、单行文本框

获得或失去焦点改变样式

CSS代码：

input:focus,textarea:focus { 
	 border: 1px solid #f00;
	 background: #fcc;
} 

但IE6不支持除超链接元素之外的：hover伪类选择器，可以通过jQuery实现同样的效果。

首先添加css样式

.focus { 
	 border: 1px solid #f00;
	 background: #fcc;
} 

jQuery添加获得/失去焦点事件

$(":input").focus(function(){
	$(this).addClass("focus");
}).blur(function(){
	$(this).removeClass("focus");
})

2、多行文本框

2.1 高度变化     动画效果优于height()方法的效果

height()方法   $(element).height($(element).height+50);

动画方法$(element).animate({height:"+=50px"},400);    //注意判断文本框是否处于动画状态

2.2 滚动条高度变化    控制多行文本框的滚动条的变化，使文本框内的内容滚动
scrollTop属性

$(element).animate({scrollTop:"+=50px"},400); 

3、复选框应用

对复选框的全选、反选、全不选等操作

<form>
	<input type="checkbox" name="items" value="足球">足球
	<input type="checkbox" name="items" value="篮球">篮球
	<input type="checkbox" name="items" value="羽毛球">羽毛球
	<input type="checkbox" name="items" value="乒乓球">乒乓球
	<input type="checkbox" id="Checked" value="全选/全不选">全选/全不选
	<input type="button" id="CheckedAll" value="全选">
	<input type="button" id="CheckedNo" value="全不选">
	<input type="button" id="CheckedRev" value="反选">
	<input type="button" id="submit" value="提交">
</form>

jQuery代码：

//全选
$("#CheckedAll").click(function(){
	$("[name=items]:checkbox").attr("checked",true);
})
//全不选
$("#CheckedNo").click(function(){
	$("[name=items]:checkbox").attr("checked",false);
})
//合并全选与全不选
// $("#Checked").click(function(){
// 	if (this.checked) {
// 		$("[name=items]:checkbox").attr("checked",true);
// 	}else {
// 		$("[name=items]:checkbox").attr("checked",false);
// 	}
// })
//全选与全不选优化
$("#Checked").click(function(){
	$("[name=items]:checkbox").attr("checked",this.checked);
})
// $("#[name=items]:checkbox").click(function(){
// 	var flag = true;
// 	$("[name=items]:checkbox").each(function(){
// 		if(!this.checked){
// 			flag = false;
// 		}
// 	});
// 	$("#Checked").attr("checked",flag);
// })
$("#[name=items]:checkbox").click(function(){
	var $tmp = $("[name=items]:checkbox");
	$("#Checked").attr("checked",$tmp.length==$tmp.filter(":checked").length);
})
//反选
$("#CheckedRev").click(function(){
	$("[name=items]:checkbox").each(function(){
		// $(this).attr("checked",!$(this).attr("checked"));
		this.checked = !this.checked;	//javascript方法
	});
})
//提交
$("#submit").click(function(){
	var str = "checked:\r";
	$("[name=items]:checkbox:checked").each(function(){
		str += $(this).val()+"\r";
	})
	alert(str);
})

4、下拉框应用

$('#add').click(function() {
	//获取全部的选项,删除并追加给对方
	$('#select1 option:selected').appendTo('#select2');
});

$('#add_all').click(function() {
	//获取全部的选项,删除并追加给对方
	$('#select1 option').appendTo('#select2');
});
//双击选项
$('#select1').dblclick(function(){ //绑定双击事件
	//获取全部的选项,删除并追加给对方
	$("option:selected",this).appendTo('#select2'); //追加给对方
});

5、表单验证
表单验证是网站管理者与浏览者沟通的桥梁。如：用户提交信息、用户查询信息、用户反馈信息

表单中class属性为“required”为必填项。即该项文本框后面红星标识

//如果是必填的，则加红星标识.
$("form :input.required").each(function(){
	var $required = $("<strong class='high'> *</strong>"); //创建元素
	$(this).parent().append($required); //然后将它追加到文档中
});

HTML代码：

<div class="int">
	<label for="username">用户名:</label>
	<input type="text" id="username" class="required" />
</div>
<div class="int">
	<label for="email">邮箱:</label>
	<input type="text" id="email" class="required" />
</div>

验证表单元素，比如用户名、邮箱是否符合验证规则

• 判断当前失去焦点的元素是用户名还是邮箱，然后分别处理
• 用户名验证
• 邮箱验证
• 将提醒信息追加到当前元素的父元素的后面

注意每次失去焦点后，都会创建一个新的提醒信息，所以在需要创建提醒元素之前，将当前元素之前创建的提醒信息删除掉，可以通过remove()方法实现。

//文本框失去焦点后
$('form :input').blur(function(){  // 为表单元素添加失去焦点事件
	 var $parent = $(this).parent();
	 $parent.find(".formtips").remove(); //去掉先前的提醒
	 //验证用户名
	 if( $(this).is('#username') ){
			if( this.value=="" || this.value.length < 6 ){
			    var errorMsg = '请输入至少6位的用户名.';
                $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
			}else{
			    var okMsg = '输入正确.';
			    $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
			}
	 }
	 //验证邮件
	 if( $(this).is('#email') ){
		if( this.value=="" || ( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) ) ){
              var errorMsg = '请输入正确的E-Mail地址.';
			  $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
		}else{
              var okMsg = '输入正确.';
			  $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
		}
	 }
})

提交验证

<div class="sub">
	<input type="submit" value="提交" id="send"/><input type="reset" id="res"/>
</div>

为使表单填写准确，在表单提交之前，需要对表单的必填项进行一次整体的验证。可以直接用trigger()方法来触发blur事件，从而达到提醒的目的。

//提交，最终验证。
 $('#send').click(function(){
		$("form :input.required").trigger('blur');
		var numError = $('form .onError').length;
		if(numError){
			return false;
		} 
		alert("注册成功,密码已发到你的邮箱,请查收.");
 });

为了能否及时提醒，需要给表单绑定keyup事件和focus事件，keyup事件能够在用户每次松开按键时触发，实现实时提醒；focus事件能在元素获得焦点的时候触发，同样可以实时提醒。

//文本框失去焦点后
$('form :input').blur(function(){
	 var $parent = $(this).parent();
	 $parent.find(".formtips").remove();
	 //验证信息...
}).keyup(function(){
   $(this).triggerHandler("blur");
}).focus(function(){
	   $(this).triggerHandler("blur");
});//end blur

trigger("blur")会触发元素绑定的blur事件，也会触发浏览器默认的blur事件；

而triggerHandler("blur")只会触发元素绑定的blur事件，并不会触发浏览器默认的blur事件