jQuery对表单的操作

表单的组成部分：表单标签、表单域、表单按钮

<form><fieldset><legend><label><input><textarea>

1.单行文本框——获取和失去焦点改变样式

当文本框获取焦点后，它的颜色有变化；失去焦点后恢复为原来的样式，可使用css中的伪类选择符实现该功能

CSS代码：
input:focus,textarea:focus{
      border:;background:;
}　

问题：IE6不支持除了超链接元素外的：hover伪类选择器

解决办法：

第一、x在css中添加一个类名为focus的样式

.focus{
       border:;
       background:;
}

第二、为文本框添加获取和失去焦点事件

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

2.多行文本框

（1）高度变化

$comment.height($comment.height()+50);等同于$comment.animate({height:"+=50"},400);

$(function(){
       var $comment=$('#comment');
       $('.bigger').click(function(){
               if(!$comment.is(":animated")){    //判断是否处于动画
                        if($comment.height()<500){
                               $comment.animate({height:"+=50"},400);
                        }
               }


        })
         $('.smaller').click(function(){
               if(!$comment.is(":animated")){    //判断是否处于动画
                        if($comment.height()<500){
                               $comment.animate({height:"-=50"},400);
                        }
               }
        })
});

（2）滚动条高度变化

通过控制多行文本框的滚动条的变化，使文本框里的内容滚动，此处只需要控制属性scrollTop

3.复选框

对复选框进行全选、反选、全不选

（1）全选、全不选——可通过控制元素的checked属性来实现。如果属性checked的值为true，说明被选中；如果值为false，说明没被选中。

全选：

$("#CheckedAll").click(function(){
      $('[name=items]:checkbox').attr('checked',true);
});

全不选：

$("#CheckedAll").click(function(){
      $('[name=items]:checkbox').attr('checked',false);
});

（2）反选——循环每一个复选框进行设置，取它们值得反值，即：如果是true设置为false，如果是false设置为true，可使用非运算符  “！” 

$("#CheckedRev").click(function(){
      $('[name=items]:checkbox').each(function(){
           $(this).attr('checked',！$(this).attr("checked"))；
      });
});

checked==！$(this).attr("checked")

简化后代码：

$("#CheckedRev").click(function(){
      $('[name=items]:checkbox').each(function(){
           this.checked=!this.checked;
      });
});

（3）提交：复选框被选中后，用户单击"提交"按钮，将选中项的值输出。可通过val()方法或取选中的值

$("#send").click(function(){
      var  str=”你选中的是：
“;
      $('[name=items]:checkbox:checked').each(function(){
                 str+=$(this).val()+"
";
      });
       alert(str);
});

 （4）用复选框控制全选与不选

首先，对另一个复选框控制

$("#CheckedAll").click(function(){   
      if(this.checked){
               $('[name=items]:checkbox').attr('checked',true);
      }else{
               $('[name=items]:checkbox').attr('checked',false);
      }
});　　

因为复选框的checked属性的值与控制全选的复选框的checked属性的值相同，可省略if判断

$("#CheckedAll").click(function(){
      $('[name=items]:checkbox').attr('checked',this.checked);
});

将全选框和复选框组进行关联，实现步骤如下：

①对复选框组绑定单击事件

②定义一个flag变量，默认为true

③玄幻复选框组，当有没被选中的选项时，变量flag的值设置为false

④根据变量flag的值设置id为"CheckedAll"的复选框是否被选中

$('[name=items]:checkbox').click(function(){
      var flag=true;
      $('[name=items]:checkbox').each(function(){
              if(!this.checked){
                         flag=false;
              }
      });
      $('#CheckedAll').attr('checked',flag);
});　　

方法二：

①对复选框组绑定单击事件

②判断复选框组的总数是否与选中的复选框数量相等

③如果相等，全选中，否则不选。

4.下拉框

通过中间的按钮，将左边选中的选项添加到右边，也可以将右边的选项添加到左边，或者双击选项，将其添加给对方

HTML代码：

<div>   
      <select multiple  id="select1" style="100px;height:160px;">   
           <option value="1">选项1</option>   
           <option value="2">选项2</option>   
           <option value="3">选项3</option>   
           <option value="4">选项4</option>   
           <option value="5">选项5</option>   
           <option value="6">选项6</option>   
           <option value="7">选项7</option>   
           <option value="8">选项8</option>   
      </select> 
      <div>
            <span id="add">选中添加到右边</span>
            <span id="add_all">全部添加到右边</span>
      </div>  
</div> 
<div>   
      <select multiple  id="select2" style="100px;height:160px;">   
      </select>
       <div>
            <span id="remove">选中删除到左边</span>
            <span id="remove_all">全部删除到左边</span>
      </div>     
</div> 　　

 第一个功能：将下拉列表中被选中的选项添加给对方，首先获取下拉列表中被选中的选项，然后将当前下拉列表中选中的选项删除，最后将删除的选型添加到对方

$('#add').click(function(){
        var options=$('#select1 option:selected');
        var $remove=$option.remove();
        $remove.appendTo('#select1');
});

删除和追加这两个步骤可以用appendTo()方法直接完成，可简化为：

$('#add').click(function(){
        var options=$('#select1 option:selected');
        $options.appendTo('#select2');
});　　

 第二个功能：将全部的选项添加给对方

$('#add_all').click(function(){
        var options=$('#select1 option');
        $options.appendTo('#select2');
});　　　

第三个功能：双击某个选项将其添加给对方

①给下拉列表绑定双击事件；②通过$("option:selected",this)来获取被选中的选项

$('#select1').dblclick(){
      var  $options=$("option:selected",this);
      $options.appendTo('#select2');
}

5.表单验证

html部分：

    <div class="int">
        <label for="username">用户名:</label>
        <!-- 为每个需要的元素添加required -->
        <input type="text" id="username" class="required" />
    </div>
    <div class="int">
        <label for="email">邮箱:</label>
        <input type="text" id="email" class="required" />
    </div>
    <div class="int">
        <label for="personinfo">个人资料:</label>
        <input type="text" id="personinfo" />
    </div>
    <div class="sub">
        <input type="submit" value="提交" id="send"/><input type="reset" id="res"/>
    </div>
</form>

分析：

（1）在表单内class属性为”required“的文本框是必须填写的，因此需要将它与其他的非必须填写表单元素加以区别，即：在文本框后追加一个红色的小星星标识。

$("form :input.required").each(function(){
            var $required = $("<strong class='high'> *</strong>"); //创建元素
            $(this).parent().append($required); //然后将它追加到文档中
});

（2）当用户在”用户名“文本框填写完信息后，将光标焦点从”用户名“移除时，需要判断用户名是否符合验证规则，邮箱同理，因此需要给表单元素添加失去焦点事件，步骤如下：

①判断当前失去焦点的元素是”用户名“还是”邮箱“，分别处理

②如果是用户名，判断元素的值的长度是否小于6，如果小于6，则用红色提醒用户输入不正确，反之，用绿色提醒用户输入正确

③如果是邮箱，判断元素的值是否符合邮箱的格式，如果不符合，则用红色提醒用户输入不正确，反之，用绿色提醒用户输入正确

④将提醒信息追加到当前元素的父元素的最后

jQuery验证部分：

<script type="text/javascript">
//<![CDATA[
$(function(){
        /*
        *思路大概是先为每一个required添加必填的标记，用each()方法来实现。
        *在each()方法中先是创建一个元素。然后通过append()方法将创建的元素加入到父元素后面。
        *这里面的this用的很精髓，每一次的this都对应着相应的input元素，然后获取相应的父元素。
        *然后为input元素添加失去焦点事件。然后进行用户名、邮件的验证。
        *这里用了一个判断is()，如果是用户名，做相应的处理，如果是邮件做相应的验证。
        *在jQuery框架中，也可以适当的穿插一写原汁原味的javascript代码。比如验证用户名中就有this.value，和this.value.length。对内容进行判断。
        *然后进行的是邮件的验证，貌似用到了正则表达式。
        *然后为input元素添加keyup事件与focus事件。就是在keyup时也要做一下验证，调用blur事件就行了。用triggerHandler()触发器，触发相应的事件。
        *最后提交表单时做统一验证
        *做好整体与细节的处理
        */
        //如果是必填的，则加红星标识.
        $("form :input.required").each(function(){
            var $required = $("<strong class='high'> *</strong>"); //创建元素
            $(this).parent().append($required); //然后将它追加到文档中
        });
        //文本框失去焦点后，由于每次元素失去焦点后，都会创建一个新的提醒元素，将它追加到文档中，最后就会出现多次的提醒信息。需要再创建提醒元素之前，将当前元素以前的提醒元素删除。

          $('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>');
                }
             }
        //给表单元素绑定keyup事件和focus事件，keyup事件能在用户每次松开按键时触发，实现即时提醒，而不是每次都要等字段元素失去焦点后才提醒输入是否正确，focus事件能在元素得到焦点的时候触发，实现即时提醒。
        }).keyup(function(){
           $(this).triggerHandler("blur");
        }).focus(function(){
             $(this).triggerHandler("blur");
        });//end blur

        
        //提交，最终验证，用trigger()方法来触发blur事件。根据class为“onError”元素的长度来判断是否可以提交。如果长度为0，说明可以提交，否则为false，说明有错误，需要阻止表单提交，阻止表单提交可以直接用“return false”语句
         $('#send').click(function(){
                $("form :input.required").trigger('blur');
                var numError = $('form .onError').length;
                if(numError){
                    return false;
                } 
                alert("注册成功,密码已发到你的邮箱,请查收.");
         });

        //重置
         $('#res').click(function(){
                $(".formtips").remove(); 
         });
})
//]]>
</script>

注意：trigger("blur")不仅会触发为元素绑定的blur事件，也会触发浏览器默认的blur事件，即：不能将光标定位到文本框上。而triggerHandler("blur")只会触发为元素绑定的blur事件，而不触发浏览器默认的blur事件。