基于jQuery的表单校验

最新推荐文章于 2024-03-14 07:00:00 发布

小希一夏

最新推荐文章于 2024-03-14 07:00:00 发布

阅读量139

点赞数

文章标签：表单校验 jQuery

本文链接：https://blog.csdn.net/weixin_42454678/article/details/99753228

版权

前面我们已经学习了利用JavaScript进行表单校验，我们知道jQuery实际上就是对JavaScript封装，因此想到利用jQuery进行表单校验是不是比JavaScript简单许多。
表单的代码如下：

<!DOCTYPE html>
<html>
	<head>
		<title>jQuery操作表格</title>
		<meta charset="UTF-8"/>
		<!--声明css代码域-->
		<style type="text/css">
			tr{
				height: 40px;
			}
		</style>
	 <script type="text/javascript" src="js/jquery-1.9.1.js" ></script>
	 <script type="text/javascript" src="js/gwc.js" ></script>
	</head>
	<body>
		<h3>jQuery操作表格</h3>
		<hr />
		<input type="button" id="fx" value="反选" />
		<input type="button" id="addRow" value="新增一行" />
		<input type="button" id="delRow" value="删除行" />
		<input type="button" id="copyRow" value="复制行" />
		<table border="1px" cellpadding="10px" cellspacing="0" id="ta">
			<tr>
				<td width="50px"><input type="checkbox" name="chks" id="chks" value="1" /></td>
				<td width="200px">书名</td>
				<td width="200px">作者</td>
				<td width="200px">数量</td>
				<td width="200px">操作</td>
			</tr>
			<tr id="">
				<td><input type="checkbox" name="chk" id="" value="2"/></td>
				<td>《Java编程之道》</td>
				<td>wollo</td>
				<td>10</td>
				<td>
					<input type="button" name="aa" id="" value="修改数量"  onclick="change(this)"/>
					<input type="button" name="" id="" value="删除"  onclick="del(this)"/>
				</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="chk" id="" value="3" /></td>
				<td>《Python和我的故事》</td>
				<td>赵老师</td>
				<td>10</td>
				<td>
					<input type="button" name="" id="" value="修改数量" onclick="change(this)"/>
					<input type="button" name="" id="" value="删除"  onclick="del(this)"/>
				</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="chk" id="" value="4" /></td>
				<td>《web开发详解》</td>
				<td>张老师</td>
				<td>30</td>
				<td>
					<input type="button" name="" id="" value="修改数量" onclick="change(this)"/>
					<input type="button" name="" id="" value="删除" onclick="del(this)"/>
				</td>
			</tr>			
		</table>
	</body>
</html>

js文件代码如下：

$(function(){
	
	/*实现全选和全不选的功能*/
	$("#chks").click(function(){
		
		var chk = $("input[name=chk]");
		var flag = $("#chks").prop("checked");
		chk.prop("checked",flag);
		
	})
	
	/*实现操作单个选框全部选择实现全选，只要有一个没选择不能实现全选*/
	$("input[name=chk]").click(function(){
		var flag = true;
		var chk = $("input[name=chk]");
		chk.each(function(){
			if(!$(this).prop("checked")){
			flag = false;
			return;
		}
		})
		$("#chks").prop("checked",flag);
	})
	
	/*实现反选的功能*/
	$("#fx").click(function(){
		
		var chk = $("input[name=chk]");
		var flag = true;
		chk.each(function(){
				$(this).prop("checked",!$(this).prop("checked"));
				if(!$(this).prop("checked")){
				flag = false;
				return;
		}
		})
		$("#chks").prop("checked",flag);
	})
	
	/*实现新增一行的操作*/
	$("#addRow").click(function(){
		
		$("#ta").append($('<tr id="">'+
				'<td><input type="checkbox" name="chk" id="" value="2"/></td>'+
				'<td>《Java编程之道》</td>'+
				'<td>wollo</td>'+
				'<td>10</td>'+
				'<td>'+
					'<input type="button" name="aa" id="" value="修改数量"  onclick="change(this)"/>&nbsp'+
					'<input type="button" name="" id="" value="删除" onclick="del(this)"/>'+
				'</td>'+
			'</tr>'))
		
	})
	
	/*实现删除行的操作*/
	$("#delRow").click(function(){
		
		var chk = $("input[name=chk]:checked");
		if(chk.length==0){
			alert("请至少选择一行");
		}else{
			/*执行删除操作*/
			chk.each(function(){
				$(this).parent().parent().remove();
			})
		}
		
	})
	
	/*实现复制行的操作*/
	$("#copyRow").click(function(){
		
		var chk = $("input[name=chk]:checked");
		if(chk.length==0){
			alert("请至少选择一行");
		}else{
			/*执行复制行的操作*/
			//复制
			var tr = chk.parent().parent().clone();
			//黏贴
			$("#ta").append(tr);
		}
		
	})
	
})

/*实现修改数量的功能*/
function change(th){
	var td = $(th).parent().parent().children().eq(3);
	$(td).html('<input type="text" size="3px" onblur="changeVal(this)" />');
}

function changeVal(th){
	var td = $(th).parent().parent().children().eq(3);
	td.html(th.value);
}

/*实现单个删除的功能*/
function del(th){
	$(th).parent().parent().remove();
}

由此可以看出使用jQuery的确比JavaScript简单。