综合jQuery在表单中的应用

 
 
 
 
 
 
 
 
 
    /*input:hover,textarea:hover{border:1px solid #f00; pink;} IE6不支持这样的伪类，因此使用一下jquery来实现* / 
    .focus{border:1px solid #f00; pink;} < /span>
    .msg{border:1px solid #666;} 
    .bigger,.smaller,.up,.down{cursor:pointer;} 
    #msg{width:auto; height:150px;} 
    #select1,#select2{width:100px; height:200px; float:left;} 
    .arrow span{display:block; height:50px; line-height:50px; cursor:pointer;} 
 
 
 
    $(function(){ 
        //单行文本框应用 
        $("input:lt(2)").focus(function(){ 
            $(this).addClass("focus"); 
        }).blur(function(){ 
            $(this).removeClass("focus"); 
        }) 
         
        //多行文本框应用 
        var $msg=$("#msg"); 
        $(".bigger").click(function(){ 
            if(!$msg.is(":animated")){ 
                if($msg.height()<500){ 
                    $msg.animate({height:"+=50"},400); 
                }; 
            } 
        }); 
        $(".smaller").click(function(){ 
            if(!$msg.is(":animated")){ 
                if($msg.height()>50){ 
                    $msg.animate({height:"-=50"},400); 
                } 
            } 
        }) 
         
        //滚动条的高度 
        $(".up").click(function(){ 
            if(!$msg.is(":animated")){ 
                $msg.animate({scrollTop:"-=10"},400); 
            } 
        }); 
        $(".down").click(function(){ 
            if(!$msg.is(":animated")){ 
                $msg.animate({scrollTop:"+=10"},400); 
            } 
        }) 
         
        //复选框的应用 
        //全选 
        $("#checkedAll").click(function(){ 
            $("[name=items]:checkbox:lt(4)").prop("checked",true); 
        }); 
        //全不选 
        $("#checkedNo").click(function(){ 
            $("[name=items]:checkbox:lt(4)").prop("checked",false); 
        }); 
        //反选 
        $("#checkedRev").click(function(){ 
            $("[name=items]:checkbox:lt(4)").each(function(){ 
                /*$(this).attr("checked",!$(this).attr("checked"));//jquery方法显得有点复杂，下面是js方法*/ 
                this.checked=!this.checked; 
            }) 
        }); 
        //发送 
        $("#send").click(function(){ 
            var str="你选中的是：\r\n";//\r\n是换行符 
            $("[name=items]:checkbox:checked").each(function(){ 
                str+=$(this).val()+"\r\n"; 
            }); 
            alert(str); 
        }); 
        //用复选框来做全选与全部选 
        $("#selectedAll").click(function(){ 
            /*if(this.checked){ 
                $("[name=items]:checkbox:gt(3)").prop("checked",true); 
            }else{ 
                $("[name=items]:checkbox:gt(3)").prop("checked",false); 
            }*/ 
            //以上方法可以简写为： 
            $("[name=items]:checkbox:gt(3)").prop("checked",this.checked); 
        }); 
        //是按钮复选框和其他复选框联动起来 
        $("[name=items]:checkbox:gt(3)").click(function(){ 
            /*var flag=true;   //联动方法一： 
            $("[name=items]:checkbox").each(function(){ 
                if(!this.checked){ 
                    flag=false; 
                } 
            }); 
            $("#selectedAll").prop("checked",flag);*/ 
            //联动方法二： 
            var $tmp=$("[name=items]:checkbox:gt(3)");//定义一个临时变量 
            //使用filter()方法筛选出选中的复选框，并直接给selectedAll赋值 
            $("#selectedAll").prop("checked",$tmp.length==$tmp.filter(":checked").length); 
            //判断复选框的总数是否与选中的复选框数量相等 
             
        }); 
         
        //下拉菜单的应用 
        //左边到右边 
        $("#add1").click(function(){ 
            /*var $options=$("#select1 option:selected");//获取到选中的相 
            var $remove=$options.remove();  //删除下拉列表中选中的相 
            $remove.appendTo("#select2");   //追加给右边的下拉列表*/ 
            //删除和追加这两个步骤可以由appendTo直接完成，以上方法可以写为： 
            var $options=$("#select1 option:selected"); 
            $options.appendTo("#select2"); 
        }); 
        $("#add1_all").click(function(){ 
            var $options=$("#select1 option");//获取所有选项 
            $options.appendTo("#select2"); 
        }); 
        $("#select1").dblclick(function(){//绑定双击事件 
            var $options=$("option:selected",this); 
            $options.appendTo("#select2"); 
        }); 
        //右边到左边 
        $("#add2").click(function(){ 
            var $options=$("#select2 option:selected"); 
            $options.appendTo("#select1"); 
        }); 
        $("#add2_all").click(function(){ 
            var $options=$("#select2 option"); 
            $options.appendTo("#select1"); 
        }); 
        $("#select2").dblclick(function(){ 
            var $options=$("option:selected",this); 
            $options.appendTo("#select1"); 
        }); 
         
        //表单验证 
        $("input.required").each(function(){ 
            var $required=$("*"); 
            $(this).parent().append($required); 
        }).blur(function(){ 
            var $parent=$(this).parent(); 
            $parent.find(".formtips").remove(); 
            //验证用户名 
            if($(this).is("#username")){ 
                if(this.style==""||this.value.length<6){ 
                    var errorMsg="请输入至少6位的用户名"; 
                    $parent.append(""+errorMsg+""); 
                }else{ 
                    var okMsg="输入正确"; 
                    $parent.append(""+okMsg+""); 
                } 
            }; 
            //验证邮箱 
            if($(this).is("#email")){ 
                if(this.value==""||(this.value!=""&&!/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))){ 
                    var errorMsg="请输入正确的email地址"; 
                    $parent.append(""+errorMsg+""); 
                }else{ 
                    var okMsg="输入正确"; 
                    $parent.append(""); 
                }; 
            }; 
        }); 
    }) 
 
 
 
 
     
        
 
            
个人基本信息
 
             
                名称：