jQuery对表单的操作

最新推荐文章于 2022-11-06 08:04:47 发布

嗨皮汪小成

最新推荐文章于 2022-11-06 08:04:47 发布

阅读量88

点赞数

分类专栏： JavaScript 文章标签： jquery ViewUI

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.单行文本框应用

获得和失去焦点改变样式

添加样式：

<style type="text/css">
	.focus {
		border: 1px solid #f00;
		background: #fcc;
	}
</style>

具体实现：

<body>
<form action="#" method="post" id="regForm">
<fieldset>
	<legend>个人基本信息</legend>
	<div>
		<label for="userName">名称：</label>
		<input type="text" id="userName" />
	</div>
	<div>
		<label for="password">密码：</label>
		<input type="password" id="pass" />
	</div>
</fieldset>
</form>
<script type="text/javascript"> 
	$(":input").focus(function(){
		$(this).addClass("focus");
	}).blur(function(){
		$(this).removeClass("focus");
	});
</script>
</body>

2.多行文本框应用

● 高度变化

<body>
<form>
	<div class="msg">
		<div class="msg_caption">
			<span class="bigger">放大</span>
			<span class="smaller">缩小</span>
		</div>
		<div>
			<textarea id="comment" rows="8" cols="30">jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写的更少,做的更多)。</textarea>
		</div>
	</div>
</form>
<script type="text/javascript"> 
	var $comment = $("#comment");
	$(".bigger").click(function(){
		if($comment.height()<500){//如果高度小于500，每次点击高度增加50
			$comment.height($comment.height()+50);
		}
	});
	$(".smaller").click(function(){
		if($comment.height()>50){//如果高度大于50，每次点击高度减少50
			$comment.height($comment.height()-50);
		}
	});
</script>
</body>

● 滚动条高度变化

3.复选框应用

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../script/jquery-1.10.1.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		//全选
		$("#checkedAll").click(function(){
			$("[name=items]:checkbox").attr("checked",true);
		});
		//全不选
		$("#checkedNo").click(function(){
			$("[name=items]:checkbox").attr("checked",false);
		});
		//反选
		$("#checkedRev").click(function(){
			$("[name=items]:checkbox").each(function(){//each()
				$(this).attr("checked",!$(this).attr("checked"));
			});
		});
	});
</script>
<title>复选框应用</title>
</head>
<body>
<form>
	你爱好的运动是：<br />
	<input type="checkbox" name="items" value="篮球">篮球<br />
	<input type="checkbox" name="items" value="足球">足球<br />
	<input type="checkbox" name="items" value="羽毛球">羽毛球<br />
	<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="提交" /><br />
</form>
</body>
</html>

如上的代码，我刚开始在IE9上执行的时候，全选、全不选，第一次点击的时候是能够正确执行的，但是第二次再点的时候就没有反应了。在IE8上就是完全正确的。哎，不得不感叹：IE不同版本间的差异真大啊。

使用复选框取代全选、全不选按钮并根据复选框是否全选更新该复选框checkedAll状态

思路：对复选框组绑定单击事件；定义一个变量flag，初始化为true；检查复选框组中的复选框是否全部选中，如果有没有被选中的，flag赋为false；根据flag的值来更新“checkedAll"的状态。

<body>
<form>
	你爱好的运动是：<br />
	<input type="checkbox" name="items" value="篮球">篮球<br />
	<input type="checkbox" name="items" value="足球">足球<br />
	<input type="checkbox" name="items" value="羽毛球">羽毛球<br />
	<input type="checkbox" name="items" value="乒乓球">乒乓球<br />
	<input type="checkbox" id="checkedAll" value="全选/全不选">全选/全不选<br />
	<input type="button" id="checkedRev" value="反选" />
	<input type="button" id="send" value="提交" /><br />
</form>
<script type="text/javascript">
	//全选或者全不选
	$("#checkedAll").click(function(){
		if(this.checked){
			$("[name=items]:checkbox").attr("checked",true);
		}else{
			$("[name=items]:checkbox").attr("checked",false);
		}
	});
	//反选
	$("#checkedRev").click(function(){
		$("[name=items]:checkbox").each(function(){//each()
			$(this).attr("checked",!$(this).attr("checked"));
		});
	});
	//检查是否全选以更新checkedAll状态
	$("[name=items]:checkbox").click(function(){
		var flag = true;
		$("[name=items]:checkbox").each(function(){
			if(!this.checked){
				flag = false;
			}
		});
		$("#checkedAll").attr("checked",flag);
	});
</script>
</body>

4.下拉列表框应用

选中添加到右边、全部添加到右边、双击添加到右边

<body>
<div class="content">
	<select multiple id="select_01" style="width: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>
	</select>
	<div>
		<span id="add">选中添加到右边>></span>
		<span id="add_all">全部添加到右边>></span>
	</div>
</div>
<div class="content">
	<select multiple id="select_02" style="width:100px;height:160px">
	</select>
	<div>
		<span id="remove">选中删除到左边>></span>
		<span id="add_all">全部删除到左边>></span>
	</div>
</div>
<script type="text/javascript">
	//选中添加到右边
	$("#add").click(function(){
		var $options = $("#select_01 option:selected");
		$options.appendTo("#select_02");
	});
	//全部添加到右边
	$("#add_all").click(function(){
		var $options = $("#select_01 option");
		$options.each(function(){
			$(this).appendTo("#select_02");
		});
	});
	//通过双击添加到右边
	$("#select_01").dblclick(function(){
		var $options = $("option:selected",this);//获得选中的选项
		$options.appendTo("#select_02");
	});
</script>
</body>

我不明白为什么“var $options = $("option:selected",this);”这一句的“this”是个什么意思？没有功能是一样能够实现的。是不是jQuery选择器？

5.表单验证

用户名长度必须大于6；邮箱格式要正确；正则表达式。

<body>
<form>
	<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="info">资料：</label>
		<input type="text" id="info" />
	</div>
	<div class="sub">
		<input type="submit" id="send" value="提交" />
		<input type="reset" id="res" value="重置" />
	</div>
</form>
<script type="text/javascript">
	//alert($("form :input.required").length);
	//在必填选项后追加”*”
	$("form :input.required").each(function(){//"form :input.required":form后面必须有个空格，否则找不到
		//$(this).parent().append("<strong class='high'>*</strong>");
		var $required = $("<strong class='high'>*</strong>");
		$(this).parent().append($required);
	});
	$("form :input.required").blur(function(){
		var $parent = $(this).parent();
		$parent.find(".formtips").remove();//删除以前的提示
		if($(this).is("#username")){//验证姓名
			var username = this.value;//此处如果不另外声明一个变量，会使#username被赋值true或false
			if(username="" || username.length<6){
				var msg = "用户名不能为空并且长度要大于6个字符";
				$parent.append("<strong class='formtips onError'>"+msg+"</strong>");
			}else{
				var msg = "输入正确";
				$parent.append("<strong class='formtips onSuccess'>"+msg+"</strong>");
			}
		}
		if($(this).is("#email")){//验证邮箱
			var email = this.value;
			if(email="" || (!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(email))){
				var msg = "请填写正确的邮箱";
				$parent.append("<strong class='formtips onError'>"+msg+"</strong>");
			}else{
				var msg = "输入正确";
				$parent.append("<strong class='formtips onSuccess'>"+msg+"</strong>");
			}
		}
	});
	//当点击提交时，校验必填项是否已经填写。如果没有，则阻止提交
	$("#send").click(function(){
		$("form :input.required").trigger("blur");
		var errorLength = $("strong.onError").length;
		if(errorLength == 0){
			alert("注册成功");
		}else{
			alert("你填写的信息有误");
			return false;
		}
	});
</script>
</body>

嗨皮汪小成

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery对表单的操作

1.单行文本框应用获得和失去焦点改变样式添加样式：&lt;style type="text/css"&gt; .focus { border: 1px solid #f00; background: #fcc; }&lt;/style&gt;具体实现：&lt;body&gt;&lt;form action="#" method="post" i
复制链接

扫一扫

专栏目录