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

来源：互联网发布：linux tail 指定行编辑：程序博客网时间：2024/05/17 22:42

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>

0 0