您的位置：首页 > Web前端 > JavaScript

jsp实现表单异步验证+传送接收数据

2016-07-19 15:15 369 查看

1、首先我们需要下载jquery.validate.js和jquery.min.js，将他们引入jsp文件中。js放置目录如图所示

2、我们在jsp文件中新建一个表单，然后利用jquery.validate.js中的验证函数做异步验证

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>表单验证</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>

<script>

$().ready(function() {
$("#commentForm").validate();
});
</script>
<style>
.error{
color:red;
}
</style>
</head>
<body>
<form action="main.jsp" class="cmxform" id="commentForm" method="GET" >
<fieldset>
<legend>输入您的名字，邮箱，URL，备注。</legend>
<p>
<label for="cname">Name (必需, 最小两个字母)</label>
<input id="cname" name="name" minlength="2" type="text" required>
</p>
<p>
<label for="cemail">E-Mail (必需)</label>
<input id="cemail" type="email" name="email" required>
</p>

<p>
<input type="submit" value="提交" />
</p>
</fieldset>
</form>
</body>
</html>

3、新建另一个main.jsp文件，写入接收数据的代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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">
<title>Insert title here</title>
</head>
<body>

<h1>使用 GET 方法读取数据</h1>
<ul>
<li><p><b>用户名:</b>
<%= request.getParameter("name")%>
</p></li>
<li><p><b>邮箱:</b>
<%= request.getParameter("email")%>
</p></li>

</ul>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jsp

相关文章推荐

新的分享

章节导航