<java EE 项目：petstore> 从一个简单项目看 java web 如何在本jsp页面上对用户输入的格式进行限制与验证
来源：互联网 发布：淘宝一天最多几个好评 编辑：程序博客网 时间：2024/06/05 06:41
项目说明：
在我们写一些类似于登入注册页面，需要用户输入信息时，往往要对用户的输入信息的格式进行验证与限制。一般我们会将表单提交后在另一个Servlet或jsp页面上进行验证，但是一出错页面就会重新刷新，使得之前输入的信息丢失，这样用户体验就会很差。
现在的一些流行的网页，都是在输入未提交之前就会提醒用户，使用户能及时的进行修改。
接下来，我们就通过一个小的练习，来看看 如何实现在本jsp页面上对用户输入信息的格式进行限制与验证。
比如：提醒用户名不能为空，电话格式不对，时间格式不对，或者是通过局部刷新来验证是否用户名重复等等效果。
相关的技术：JQuery ，正则表达式， AJAX （本实验还没有涉及到，这是关于局部刷新的技术）
注意：本博客重点在于后面的add.jsp的实现
项目需求： 
项目实现：
（1）数据库设计： 
（2）效果图：
按种类查找： 
昵称不能为空： 
日期不能为空： 
日期格式验证： 
正确输入全部信息： 
插入成功：
数据库更新
源代码：
（1）项目整体结构：三层结构 数据层，业务层，表示层
本文重点
表示层： 
showPet.jsp：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@ taglib uri = "http://java.sun.com/jsp/jstl/core" prefix="c"%><%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> </head> <body> <div id = "pet"> <form id="pets" action="showPetAction.jsp" method="post"> <table colspan = "2" align="center" > <tr> <td><strong>品种 </strong></td> <td> <select style = "width:150px;" name = "breed" id = "breed"> <option value = ""> --请选择--</option> <option value = "狗"> 狗 </option> <option value = "猫"> 猫 </option> <option value = "鸟"> 鸟 </option> <option value = "蛇"> 蛇 </option> </td> <td> <input id="btnSubmit" type="submit" name="btnSubmit" value="查询" /> <a href="addPet.jsp">新增宠物</a> </td> </tr> </table> </form> <table border = "1" align="center"> <tr> <td style = "width:150px;"><strong>宠物名称 </strong></td> <td style = "width:150px;"><strong>出生日期</strong></td> <td style = "width:150px;"><strong>性别</strong></td> </tr> <c:forEach var="pet" items="${pets}"> <tr> <td style = "width:150px;"><strong>${pet.pet_Name}</strong></td> <td style = "width:150px;"><strong>${pet.getBirthday()}</strong></td> <td style = "width:150px;"><strong>${pet.pet_Sex}</strong></td> </tr> </c:forEach> </table> </div> </body></html>showPetAction.jsp：
<%@page import="com.petstore.biz.impl.PetBizImpl"%><%@page import="com.petstore.biz.PetBiz"%><%@page import="com.petstore.entity.Pet"%><%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><% request.setCharacterEncoding("utf-8"); String breed = request.getParameter("breed"); List<Pet> pets = new ArrayList<Pet>(); PetBiz petBiz = new PetBizImpl(); pets = petBiz.getPetsByBreed(breed); if(pets.size() > 0) { request.setAttribute("pets", pets); request.getRequestDispatcher("showPet.jsp").forward(request, response); } else { request.getRequestDispatcher("showPet.jsp").forward(request, response); } %>addPet.jsp：
请注意head中的script中的JQuery函数的申明与注册：
要想运行JQuery的函数，需要添加一下内容：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%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> <link type="text/css" rel="Stylesheet" href="style/front.css"/> <script type="text/javascript" src="script/jquery-1.4.1.js"></script> <script type="text/javascript"> function checkPetName() { var pet_name = $("#pet_name").val(); if(pet_name == "") { $("#pet_name").next(".error").text("昵称不能为空!"); alert("昵称不能为空!"); return false; } else { $("#pet_name").next(".error").text(""); return true; } } function checkBirthday() { var birthday = $("#birthday").val(); if(birthday == "") { $("#birthday").next(".error").text("birthday不能为空"); return false; } else { $("#birthday").next(".error").text(""); var reg = /^[1-9][0-9][0-9][0-9]-[0-1][0-9]-[0-3][0-9]$/; if(reg.test(birthday)) //验证格式是否匹配 { $("birthday").next(".error").text(""); return true; } else { alert("birthday格式不正确"); return false; } } } $(function(){ $("#pet_name").blur(checkPetName); $("#birthday").blur(checkBirthday); }); </script> </head> <body > <form id="" action="AddServlet" method="post" > <table border = "1" align="center" style = "width:420px;"> <tr> <td align="center" colspan = "2"><strong>宠物的基本信息</strong></td> </tr> <tr> <td><strong>昵称：</strong></td> <td><input class="txt" type="text" id="pet_name" name="pet_name" style = "width:180px;"/> <label class="error"></label></td> </tr> <tr> <td><strong>品种：</strong></td> <td> <select style = "width:180px;" name = "pet_breed" id = "pet_breed"> <option value = ""> --请选择--</option> <option value = "狗"> 狗 </option> <option value = "猫"> 猫 </option> <option value = "鸟"> 鸟 </option> <option value = "蛇"> 蛇 </option> </td> </tr> <tr> <td><strong>性别：</strong></td> <td><input type="radio" name="pet_sex" value="雄" />雄 <input type="radio" name="pet_sex" value="雌" />雌</td> </tr> <tr> <td>出生日期：</td> <td><input class="txt" type="text" id="birthday" name="birthday" style = "width:180px;"/> 日期格式：yyyy-mm-dd <label class="error"></label></td> </tr> <tr> <td>宠物描述：</td> <td><textarea id="description" name="description" style = "width:350px;"> </textarea> <label class="error"></label></td> </tr> <tr> <td></td> <td > <input id="btnSubmit" type="submit" name="btnSubmit" value="提交" /> <input type="reset" name="reset" id="reset" value="重置" /> </td> </tr> <tr> <td colspan="2" align="center" ><label class="error">${error}</label> </td> </tr> </table> </form> </body></html>AddServlet：
package com.petstore.servlet;import java.io.IOException;import java.io.PrintWriter;import java.text.DateFormat;import java.text.SimpleDateFormat;import java.util.Date;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.swing.text.SimpleAttributeSet;import com.petstore.biz.PetBiz;import com.petstore.biz.impl.PetBizImpl;import com.petstore.entity.Pet;public class AddServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset = utf-8"); request.setCharacterEncoding("utf-8"); String pet_name = request.getParameter("pet_name"); String pet_breed = request.getParameter("pet_breed"); String pet_sex = request.getParameter("pet_sex"); String description = request.getParameter("description"); DateFormat sdf = new SimpleDateFormat("yyyy-MM-dd"); try { Date date = sdf.parse(request.getParameter("birthday")); Pet pet = new Pet(pet_name,pet_breed,pet_sex,date,description); PetBiz petBiz = new PetBizImpl(); int count = petBiz.addPet(pet); if(count > 0) { request.setAttribute("error", "插入新的宠物!"); request.getRequestDispatcher("addPet.jsp").forward(request, response); } else { request.setAttribute("error", "插入失败!"); request.getRequestDispatcher("addPet.jsp").forward(request, response); } } catch (Exception e) { e.printStackTrace(); } } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); }}业务层：
接口：PetBiz.java：
package com.petstore.biz;import java.util.List;import com.petstore.entity.Pet;public interface PetBiz { List<Pet> getPetsByBreed(String breed); int addPet(Pet pet);}实现：PetBizImpl.java：
package com.petstore.biz.impl;import java.util.List;import com.petstore.biz.PetBiz;import com.petstore.dao.PetDao;import com.petstore.dao.impl.PetDaoImpl;import com.petstore.entity.Pet;public class PetBizImpl implements PetBiz{ PetDao petDao = new PetDaoImpl(); public List<Pet> getPetsByBreed(String breed) { return petDao.getPetsByBreed(breed); } public int addPet(Pet pet) { return petDao.addPet(pet); }}数据层：
实体 Pet.java：
package com.petstore.entity;import java.util.Date;public class Pet { private int pet_Id; private String pet_Name; private String pet_Breed; private String pet_Sex; private Date Birthday; private String description; public Pet(){} public Pet(String pet_Name, String pet_Breed, String pet_Sex, Date birthday, String description) { super(); this.pet_Name = pet_Name; this.pet_Breed = pet_Breed; this.pet_Sex = pet_Sex; Birthday = birthday; this.description = description; } public int getPet_Id() { return pet_Id; } public void setPet_Id(int pet_Id) { this.pet_Id = pet_Id; } public String getPet_Name() { return pet_Name; } public void setPet_Name(String pet_Name) { this.pet_Name = pet_Name; } public String getPet_Breed() { return pet_Breed; } public void setPet_Breed(String pet_Breed) { this.pet_Breed = pet_Breed; } public String getPet_Sex() { return pet_Sex; } public void setPet_Sex(String pet_Sex) { this.pet_Sex = pet_Sex; } public Date getBirthday() { return Birthday; } public void setBirthday(Date birthday) { Birthday = birthday; } public String getDescription() { return description; } public void setDescription(String description) { this.description = description; }}接口 PetDao.java：
package com.petstore.dao;import java.util.List;import com.petstore.entity.Pet;public interface PetDao { List<Pet> getPetsByBreed(String breed); int addPet(Pet pet);}实现 PetDaoImpl.java：
package com.petstore.dao.impl;import java.sql.ResultSet;import java.text.DateFormat;import java.text.SimpleDateFormat;import java.util.ArrayList;import java.util.Date;import java.util.List;import com.petstore.dao.PetDao;import com.petstore.entity.Pet;public class PetDaoImpl extends BaseDao implements PetDao{ public List<Pet> getPetsByBreed(String breed) { List<Pet> pets = new ArrayList<Pet>(); String sql = "select * from pet where Pet_Breed = ?"; try { openConnection(); ResultSet rs = executeQuery(sql, new Object[]{breed}); while(rs.next()) { Pet pet = new Pet(); pet.setPet_Id(rs.getInt("Pet_ID")); pet.setPet_Name(rs.getString("Pet_Name")); pet.setPet_Sex(rs.getString("Pet_Sex")); pet.setPet_Breed(rs.getString("Pet_Breed")); pet.setBirthday(rs.getDate("Birthday")); pet.setDescription(rs.getString("Description")); pets.add(pet); } } catch (Exception e) { e.printStackTrace(); } finally { closeResource(); } return pets; } public static void main(String[] args) { PetDao petDao = new PetDaoImpl(); /* Pet pet = new Pet(); pet.setPet_Name("花花"); pet.setPet_Breed("狗"); pet.setPet_Sex("雌"); DateFormat sdf = new SimpleDateFormat("yyy-MM-dd"); try { Date birthday = sdf.parse("2016-02-02"); pet.setBirthday(birthday); int count = petDao.addPet(pet); System.out.println(count); } catch (Exception e) { e.printStackTrace(); } */ List<Pet> pets = petDao.getPetsByBreed("狗"); System.out.println(pets.size()); for(Pet pet : pets) { System.out.println(pet.getBirthday()); } } public int addPet(Pet pet) { int count = 0; try { String sql = "insert into pet (pet_name,pet_sex,pet_breed,birthday,description) values(?,?,?,?,?)"; Object[] params = new Object[]{ pet.getPet_Name(), pet.getPet_Sex(), pet.getPet_Breed(), pet.getBirthday(), pet.getDescription() }; openConnection(); count = executeUpdate(sql, params); sql = "select last_insert_id()"; ResultSet rs = executeQuery(sql, null); if(rs.next()) { pet.setPet_Id(rs.getInt(1)); } } catch (Exception e) { e.printStackTrace(); } finally { closeResource(); } return count; }}实现 BaseDao.java：数据库函数的封装
package com.petstore.dao.impl;import java.sql.Connection;import java.sql.DriverManager;import java.sql.PreparedStatement;import java.sql.ResultSet;import java.sql.SQLException;public class BaseDao { String className = "com.mysql.jdbc.Driver"; String dbUrl = "jdbc:mysql://localhost:3306/musicdb"; Connection connection; //连接 PreparedStatement statement; //命令 ResultSet resultSet; //结果集 //打开连接 public void openConnection() throws ClassNotFoundException, SQLException { //加载驱动类 Class.forName(className); connection = DriverManager.getConnection(dbUrl,"root","root"); } //增 public int executeUpdate(String sql, Object[] params) throws SQLException { statement = connection.prepareStatement(sql); if(params != null) //追加参数 { int i = 1; for(Object object : params){ statement.setObject(i, object); i++; } } //执行sql int count = statement.executeUpdate(); return count; } //查询 public ResultSet executeQuery(String sql,Object[] params) throws SQLException { statement = connection.prepareStatement(sql); if(params != null) //追加参数 { int i = 1; for(Object object : params){ statement.setObject(i, object); i++; } } resultSet = statement.executeQuery(); return resultSet; } //释放资源 public void closeResource() { try { if(resultSet != null) { resultSet.close(); } if(statement != null) { statement.close(); } if(connection != null) { connection.close(); } } catch (Exception e) { e.printStackTrace(); } }}阅读全文
0 0
- <java EE 项目：petstore> 从一个简单项目看 java web 如何在本jsp页面上对用户输入的格式进行限制与验证
- <java EE 项目：Attendance> 从一个简单项目看java web 开发的整体布局
- 关于JAVA EE项目在WEB-INF目录下的jsp页面如何访问WebRoot中的CSS和JS文件
- 关于JAVA EE项目在WEB-INF目录下的jsp页面如何访问WebRoot中的CSS和JS文件
- 关于JAVA EE项目在WEB-INF目录下的jsp页面如何访问WebRoot中的CSS和JS文件
- 关于JAVA EE项目在WEB-INF目录下的jsp页面如何访问WebRoot中的CSS和JS文件
- 关于JAVA EE项目在WEB-INF目录下的jsp页面如何访问WebRoot中的CSS和JS文件
- 关于JAVA EE项目在WEB-INF目录下的jsp页面如何访问WebRoot中的CSS和JS文件
- 关于JAVA EE项目在WEB-INF目录下的jsp页面如何访问WebRoot中的CSS和JS文件
- 关于JAVA EE项目在WEB-INF目录下的jsp页面如何访问WebRoot中的CSS和JS文件
- Spring boot 搭建一个简单的 Java EE 项目
- 如何看一个Java项目
- 在java项目中，如何限制每个用户访问接口的次数？
- 一个简单的java web 项目
- 一个简单的Java Web项目
- 【Java.Web】创建一个简单的Java Web项目
- 【WEB开发技术】一个简单的WEB项目验证码校验（如何从前端到后台一步一步的搭建、配置、发布整个Web项目？）
- SSH_框架，java一个简单的查询，并显示在jsp页面上
- css笔记：包含块(Containing Block)
- Java还要再学一遍基础（十五）
- 第一节 scala 变量的定义和使用
- 04_Qt的画笔、作画和自定义控件
- 76. Minimum Window Substring 10-line template that can solve most 'substring' problems
- <java EE 项目：petstore> 从一个简单项目看 java web 如何在本jsp页面上对用户输入的格式进行限制与验证
- CANopen 块传输通信详解
- JAVA WEB -事务处理
- java泛型之桥方法
- 关于Fragment的一些使用心得-跳转和返回栈实战浅析
- iOS 表格数据刷新
- 生活在智慧龙岗的居民究竟有多幸福？
- SpringMVC+Spring+Mybatis整合配置
- SSD 之OP预留空间
