标签：
4.表单应用
表单是HTML的重要组成部分，在采集、提交用户输入的信息和显示列表数据等需求中有重要作用
一个简单的表单HTML示例：
<form action=”url” method=”POST” >
<input type=”text” /><p/>”
<input type=”submit” />
</form>
Aa. 单行文本框应用
示例：
1.需求：当单行文本框获取和失去焦点改变样式
2.示例代码
$(function() {
$(“:input”).focus(function() {//$(“:input”)伪标签选择器
$(this).addClass(“focus”);
}).blur(function() {
$(this).removeClass(“focus”);
});
});
Ab. 多行文本框应用(<textarea></textarea>)
1.高度变化
$(function() {
var $comment = $(“#comment”);//获取多行文本框
$(“.biggerClass”).click(function() {
if(!$comment.is(“:animated”)) {//判断是否处于动画状态
if($comment.height() < 500) {
$comment.animate({height : “+=50”}, 1000);//在原有高度上每秒增加50
}
}
});
});
2.滚动条变化（控制scrollTop属性）
$(function() {
var $comment = $(“#comment”);//获取多行文本框
$(“.upClass”).click(function() {
if(!$comment.is(“:animated”)) {//判断是否处于动画状态
$comment.animate({scrollTop: “+=50”}, 1000);
}
});
});
Ac. 复选框应用
1.全选和全不选
$(function() {
$(“#checkedAll”).click(function() {
alert(“全选”);
$(“[name = items] : checkbox”).attr(“checked”, true);
});
$(“#checkedNo”).click(function() {
alert(“全选”);
$(“[name = items] : checkbox”).attr(“checked”, false);
});
});
2.反选
$(function() {
$(“#checkedRev”).click(function() {
$(“[name = items] : checkbox”).each(function() {
$(this).attr(“checked”, !$(this).attr(“checked”));
//this.checked = !this.checked;<!--采用javascript方式-->
});
});
});
Ad. 表单验证
1.必填
$(function() {
$(“form : input.required”).each(function() {
$(this).next(“.high”).remove();//如果已有必填提醒，则删除
var $html = $(“<strong class=’high’>*</strong>”);
$(this).parent().append($required);
});
});
2.验证数据格式合法性
$(function() {
$(“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’>”+okrMsg+”</span>”);
}
}
//验证邮箱
if($(this).is(“#email”)) {
if(this.value == “” || (this.value != “” && !/.+@.+.[a-zA-Z]{2,4}$/.test(this.value))) {
var erroMsg = “请输入正确的E-Mail地址”;
$parent.append(“<span class=’formtips onError’>”++”);
} else {
var okMsg = “输入正确”;
$parent.append(“<span class=’formtips onSuccess’>”+okMsg+”</span>”);
}
}
});
});
（未完...）
标签：
原文地址：http://www.cnblogs.com/imaikce/p/5628459.html
