JQuery实战：实现表单验证满足条件后提交后台

最新推荐文章于 2021-06-23 19:52:00 发布

企鹅漫步

最新推荐文章于 2021-06-23 19:52:00 发布

阅读量2.8k

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/bamboo261/article/details/11099909

版权

JQuery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

JQuery对象就是通过JQuery包装DOM对象后产生的对象。
JQuery对象将无法使用DOM对象的任何方法。同样，DOM对象也不能使用JQuery里的方法。

区分JQuery对象和DOM对象？

如果获取的是一个JQuery对象，那么我们在变量前面加上$,如：
var $variable = $("#user")；//JQuery对象
如果获取的是DOM对象，如：
var variable = document.getElementById("user")；//DOM对象

需求分析：

实现表单验证满足条件后提交后台功能

以下是具体代码演示：

index.jsp:

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index2.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	
	<!-- DOM对象实现表单验证满足条件后提交后台 -->
<!-- 	<script type="text/javascript"> -->
<!-- 		function agree(){ -->
<!-- 			var chk = document.getElementById("chk"); -->
<!-- 			if(chk.checked){ -->
<!-- 				alert("谢谢注册！"); -->
<!-- 			} -->
<!-- 		} -->
<!-- 	</script> -->
	
	
	<!-- JQuery对象实现表单验证满足条件后提交后台 -->
	<script src="<%=path %>/js/jquery-1.4.1.js"></script>
	<script type="text/javascript">
// 		 $(function (){
// 		 	alert('---------');
// 		 }); 
		 
		 $(function(){
		 	var $chk = $("#chk"); //获取JQuery对象
		 	$chk.click(function(){	//绑定点击事件
		 		if($chk.is(":checked")){ //判断JQuery对象是否选中
		 			alert("谢谢注册！");
		 		}
		 	});
		 });

	</script>

  </head>
  
  <body>
  	<form οnsubmit="return agree()">
    	<input type="checkbox" id="chk"/><label for="chk">我已经阅读并接收上面的许可</label>
    	<br/>
    	<input type="submit" value="提交"/>
  	</form>
  </body>
</html>