jquery编写表格 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事件