导航：首页 > 网络技术 >

综合jQuery在表单中的应用

发表于：2024-11-26 作者：热门IT资讯网编辑

编辑最后更新 2024年11月26日，

>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="refresh" content="600;url=单行文本框.html" />
<meta name="description" content="jquery表单应用中的单行文本框应用" />
<meta name="keywords" content="jQuery,表单，单行文本框，多行文本框，滚动条的高度，复选框的应用，下拉框的应用，表单验证" />
<title>表单应用title>
<style type="text/css">
/*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;}
style>
<script type="text/javascript" src="../jquery-1.7.2.min.js">script>
<script type="text/javascript">
$(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=$("<strong class='high'>*strong>");
$(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("<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="请输入正确的email地址";
$parent.append("<span class='formtips onError'>"+errorMsg+"span>");
}else{
var okMsg="输入正确";
$parent.append("<span class='formtips onSuccess'"+okMsg+"span>");
};
};
});
})
script>
head>
<body>
<form action="#" method="post" id="regForm">
<fieldset>
<legend>个人基本信息legend>
<div id="">
<label for="username">名称：label>
<input type="text" id="name" />
div>
<div>
<label for="pass">密码：label>
<input type="password" id="pass" />
div>
<div class="msg">
<div>
<span class="bigger">放大span>
<span class="smaller">缩小span>
<span class="up">向上span>
<span class="down">向下span>
div>
<label for="msg">详细信息：label>
<textarea id="msg">多行文本框应用，多行文本框高度变化。多行文本框应用，多行文本框高度变化。多行文本框应用，多行文本框高度变化。多行文本框应用，多行文本框高度变化。多行文本框应用，多行文本框高度变化。多行文本框应用，多行文本框高度变化。多行文本框应用，多行文本框高度变化。
textarea>
div>
fieldset>
<fieldset>
<legend>你爱好的运动是？legend>
<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="提交" />
fieldset>
<fieldset>
<legend>你喜爱的水果是？legend>
<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="checkbox" id="selectedAll" value="全选/全部选" />全选/全不选
<input type="button" id="send2" value="提交" />
fieldset>
<fieldset>
<legend>下拉框的应用legend>
<select multiple id="select1">
<option>选项1option>
<option>选项2option>
<option>选项3option>
<option>选项4option>
<option>选项5option>
<option>选项6option>
<option>选项7option>
<option>选项8option>
select>
<div class="arrow" style="float:left">
<span id="add1">选中添加到右边>>span>
<span id="add1_all">全部添加到右边>>span>
<span id="add2"><<选中添加到左边span>
<span id="add2_all"><<全部添加到左边span>
div>
<select multiple id="select2">
select>
fieldset>
<fieldset>
<legend>表单验证legend>
<div class="int">
<label for="username">用户名：label>
<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="send3" /><input type="reset" id="res" />
div>
fieldset>
form>
body>
html>