你的位置:首页 > Java教程

[Java教程]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=”你选中的是:\r\n“;  $('[name=items]:checkbox:checked').each(function(){     str+=$(this).val()+"\r\n";  });  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" >    <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" >   </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部分:

复制代码   <form method="post" action="">
 <div >  <label for="username">用户名:</label>  <!-- 为每个需要的元素添加required -->  <input type="text" id="username"  /> </div> <div >  <label for="email">邮箱:</label>  <input type="text" id="email" /> </div> <div >  <label for="personinfo">个人资料:</label>  <input type="text" id="personinfo" /> </div> <div >  <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 >'+errorMsg+'</span>');     }else{      var okMsg = '输入正确.';      $parent.append('<span >'+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 >'+errorMsg+'</span>');    }else{      var okMsg = '输入正确.';      $parent.append('<span >'+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事件。