jQuery对表单的操作

对文本框最用的操作就是当用户选中文本框时它的颜色变化，当失去焦点时恢复为原来的样式。

首先定义一个焦点的样式

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

然后为元素设置focus和blur事件的响应函数。

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

对于textarea也可以这么使用，我们也可以通过jQuery动态改变textarea的高度。html页面设置2个按扭，点击这两个按钮可以增加或者减少textarea的高度。我们为这2个按钮增加鼠标点击事件就可以

var $comment = $("#comment");
 $(".bigger").click(function(){
  if($comment.height() < 500){
    $comment.height($comment.height() + 50);
  }
});
$(".smaller").click(function(){
  if($comment.height() > 50){
    $comment.height($comment.height() - 50);
  }
});

对于textarea还有一个操作，也就是滚动条上下滚动的操作，也和上面一样，只是把height方法改成scrollTop方法就行了。

接下来对多选框进行操作。

<form action="#">
你爱好的运动是？<br />
  <input type="checkbox" name="items" value="足球" />足球
  <input type="checkbox" name="items" value="篮球" />篮球
  <input type="checkbox" name="items" value="羽毛球" />羽毛球    
  <input type="checkbox" name="items" value="乒乓球" />乒乓球<br />
  <input type="button" id="CheckedAll" value="全选">
  <input type="button" id="CheckedNo" value="全不选">
  <input type="button" id="CheckedRev" value="反选">
  <input type="button" id="send" value="提交">
</form>

按下这4个按钮分别进行相应的操作：

$(document).ready(function(){
  $("#CheckedAll").click(function(){
    $("form input[name=items]:checkbox").prop("checked", "checked");
  });
    
  $("#CheckedNo").click(function(){
    $("form input[name=items]:checkbox").prop("checked", false);
  });
    
  $("#CheckedRev").click(function(){
    $checked = $("form input[name=items]:checkbox");
    $checked.each(function(){
      $(this).prop("checked", !$(this).prop("checked"));
    });
  });
    
  $("#send").click(function(){
    var str = "你选中的是\n";
    $("form input[name=items]:checkbox:checked").each(function(){   
      str += $(this).val() + "\n";
    });
    alert(str);
  });
});

对于表单的操作还有一个最常用的就是表单验证。比如我们有以下代码

<form action="#" >
  <div class="int">
    <label for="username">用户名：</label>
    <input type="text" id="username" class="required" />
  </div>
  <div class="sub">
    <input type="submit" value="提交" id="send"/>
  </div>
</form>

我们想要把用户名设置为必须输入的项，在显示的时候在用户名文本框后加上*字符。在输入用户名的时候至少需要输入6个字符，如果用户停止输入的时候发现少于6个字符则提醒用户。还有在用户提交的时候如果用户名输入符合规范则不提交。

$(document).ready(function(){
    $("form :input.required").each(function(){
        var $required = $("<strong>*</strong>");
        $(this).parent().append($required);
    });
    
    $("form input").blur(function(){
        var $parent = $(this).parent();
        if($(this).is("#username")){
            $parent.find(".msg").remove();
            if(this.value == "" || this.value.length < 6){
                var errorMsg = "请输入至少6位用户名";
                $parent.append("<span class=\"msg error\">" + errorMsg + "</span>");
            } else {
                var okMsg = "输入正确";
                $parent.append("<span class=\"msg\">" + okMsg + "</span>");
            }
        }
    }).keyup(function(){
        $(this).triggerHandler("blur");
    });
    
    $("#send").click(function(){
        $("form .required:input").trigger("blur");
        var error = $("form .error").length;
        if(error){
            return false;
        }
        alert("成功");
    });
});