基于jQuery的表单校验

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

	
		
		
		
		
	 
	 
	
	
		
jQuery操作表格
		

		
		
		
		
		

			

				

				
书名
				
作者
				
数量
				
操作
			
			

				

				
《Java编程之道》
				
wollo
				
10
				

					
					
				
			
			

				

				
《Python和我的故事》
				
赵老师
				
10
				

					
					
				
			
			

				

				
《web开发详解》
				
张老师
				
30
				

					
					
				
			
			
		
	

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($(''+
				''+
				'《Java编程之道》'+
				'wollo'+
				'10'+
				''+
					' '+
					''+
				''+
			''))
		
	})
	
	/*实现删除行的操作*/
	$("#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('');
}

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

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

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