原文: https://howtodoinjava.com/spring-mvc/spring-mvc-display-validate-and-submit-form-example/

在任何 spring web mvc 应用程序中,我们经常必须处理表单。 应用程序首先显示一个表单,然后用户填写该表单并将其提交给服务器。 在服务器上,应用程序需要捕获表单输入并处理输入(例如,存储在数据库中)并返回成功视图。 在此 spring mvc 示例中,我们将学习显示表单,然后学习处理提交的表单字段。

在此示例中,我们将创建具有添加员工功能的员工管理模块。 它具有以下功能:

  1. 在初始页面加载时显示空白表格
  2. 如果提交的表单具有空字段,则显示错误消息
  3. 成功提交表单后,重定向到另一个屏幕,显示成功消息

Spring MVC 示例 – 显示,验证和提交表单 - 图1

Spring MVC Form Example – 空白表单

下载源码

  1. 目录
  2. 1. 创建模型数据
  3. 2. 创建表单视图
  4. 3. 创建表单控制器
  5. 4. 表单验证
  6. 5. 演示

让我们开始一个接一个地添加应用程序组件,然后记下重要的事情。

1. Spring MVC 模型数据

对于此示例应用程序,EmployeeVO类用作模型。 它将保存数据,视图将使用这些数据来呈现并发布回控制器。

EmployeeVO.java

  1. package com.howtodoinjava.demo.model;
  2. import java.io.Serializable;
  3. public class EmployeeVO implements Serializable
  4. {
  5. private static final long serialVersionUID = 1L;
  6. private Integer id;
  7. private String firstName;
  8. private String lastName;
  9. private String email;
  10. //Getters and Setters
  11. @Override
  12. public String toString() {
  13. return "EmployeeVO [id=" + id + ", firstName=" + firstName
  14. + ", lastName=" + lastName + ", email=" + email + "]";
  15. }
  16. }

2. Spring MVC 表单视图

该应用程序使用两个视图,即一个用于显示表单,另一个用于显示成功消息。

2.1. 输入表单视图

addEmployee.jsp

  1. <%@ page contentType="text/html;charset=UTF-8"%>
  2. <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
  3. <%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
  4. <html>
  5. <head>
  6. <title>Add Employee Form</title>
  7. </head>
  8. <body>
  9. <h2><spring:message code="lbl.page" text="Add New Employee" /></h2>
  10. <br/>
  11. <form:form method="post" modelAttribute="employee">
  12. <table>
  13. <tr>
  14. <td><spring:message code="lbl.firstName" text="First Name" /></td>
  15. <td><form:input path="firstName" /></td>
  16. </tr>
  17. <tr>
  18. <td><spring:message code="lbl.lastName" text="Last Name" /></td>
  19. <td><form:input path="lastName" /></td>
  20. </tr>
  21. <tr>
  22. <td><spring:message code="lbl.email" text="Email Id" /></td>
  23. <td><form:input path="email" /></td>
  24. </tr>
  25. <tr>
  26. <td colspan="2"><input type="submit" value="Add Employee"/></td>
  27. </tr>
  28. </table>
  29. </form:form>
  30. </body>
  31. </html>

要点:

  1. Spring <form:form>标签声明了两个属性。 用于指示表单的method="post"属性在提交时执行 HTTP POST 请求。 并且用于表示表单数据的modelAttribute="employee属性被绑定到名为员工的模型。
  2. 表单的各种<form:input>标签使用属性路径来指示它们绑定到的表单字段。 它们向用户显示该字段的原始值,该值要么是绑定的属性值,要么是由于绑定错误而被拒绝的值。 它们必须在<form:form>标签内使用,该标签定义了一种通过其名称绑定到modelAttribute的格式。
  3. 最后,您可以找到标准的 HTML 标记<input type="submit" />,该标记会生成一个“提交”按钮,并触发向服务器发送数据,然后是关闭表单的标记。

请注意,<spring:message>标签用于显示类路径中存在的消息资源文件的字段标签。 在我们的例子中,消息资源的内容如下:

messages.properties

  1. lbl.page=Add New Employee
  2. lbl.firstName=First Name
  3. lbl.lastName=Last Name
  4. lbl.email=Email Id

2.2. 成功页面视图

addSuccess.jsp

  1. <html>
  2. <head>
  3. <title>Add Employee Success</title>
  4. </head>
  5. <body>
  6. Employee has been added successfully.
  7. </body>
  8. </html>

该文件非常简单,仅显示成功消息。

3. Spring MVC 表单控制器

一个非常简单的 spring mvc 控制器,用于处理表单提交。

EmployeeController.java

  1. @Controller
  2. @RequestMapping("/employee-module/addNew")
  3. @SessionAttributes("employee")
  4. public class EmployeeController
  5. {
  6. @Autowired
  7. EmployeeManager manager;
  8. @RequestMapping(method = RequestMethod.GET)
  9. public String setupForm(Model model)
  10. {
  11. EmployeeVO employeeVO = new EmployeeVO();
  12. model.addAttribute("employee", employeeVO);
  13. return "addEmployee";
  14. }
  15. @RequestMapping(method = RequestMethod.POST)
  16. public String submitForm(@ModelAttribute("employee") EmployeeVO employeeVO,
  17. BindingResult result, SessionStatus status)
  18. {
  19. //Store the employee information in database
  20. //manager.createNewRecord(employeeVO);
  21. //Mark Session Complete
  22. status.setComplete();
  23. return "redirect:addNew/success";
  24. }
  25. @RequestMapping(value = "/success", method = RequestMethod.GET)
  26. public String success(Model model)
  27. {
  28. return "addSuccess";
  29. }
  30. }

要点:

  1. 控制器首先使用标准@Controller注解以及@RequestMapping注解,该注解允许通过 URL http://localhost:8080/springmvcexample/employee-module/addNew访问控制器
  2. 在浏览器中输入该 URL 时,它将向您的 Web 应用程序发送 HTTP GET 请求。 这进而触发setupForm方法的执行,该方法根据其@RequestMapping注解被指定为参加这种类型的请求。
  3. 由于表单可能包含错误,因此丢失用户在以后每次提交时提供的任何有效数据可能会带来不便。 为了解决此问题,@SessionAttributes用于将员工字段保存到用户的会话中,以便将来对员工字段的任何引用实际上都是在相同的引用上进行的,无论表单是提交两次还是多次。
  4. setupForm方法将Model对象定义为输入参数,用于将模型数据发送到视图(即表单)。 在处理器方法内部,创建了一个空的EmployeeVO对象,并将其作为属性添加到控制器的模型对象中。 然后,控制器将执行流程返回到addEmployee视图,在这种情况下,该视图解析为我们在上面看到的addEmployee.jsp
  5. 填写表单字段后,提交表单会触发 HTTP POST 请求,该请求又会调用submitForm方法。 @ModelAttribute("employee") EmployeeVO employeeVO用于引用员工对象。 包含用户新提交的数据的BindingResult对象。 如果需要访问用户的会话,则使用SessionStatus对象。
  6. 在将用户重定向到成功页面之前,我们应该清除会话数据,因为现在它已无用。 这是通过在SessionStatu的对象上调用setComplete()方法来完成的。
  7. 在数据库中创建员工后,submitForm方法返回名为redirect:addNew/success的视图。 视图名称中的forward:前缀用于避免称为重复表单提交的问题。

当您在表单成功视图中刷新网页时,刚刚提交的表单将再次重新提交。 为避免此问题,您可以应用 post/redirect/get 设计模式,该模式建议在成功处理表单提交后重定向到另一个 URL,而不是直接返回 HTML 页面。

4. Spring MVC 表单验证

到现在为止,我们的示例应用程序能够显示表单,并接收带有填充值的提交表单。 在现实生活中的应用中,用户在填写表格时会犯很多错误。 验证应该始终在客户端进行,但是为了保护数据完整性,您还应该在服务器端进行数据验证。

验证可以添加到应用程序中,分为两个步骤,即首先在视图层,然后在控制器代码。

4.1. 修改后的addEmployee.jsp

  1. <%@ page contentType="text/html;charset=UTF-8"%>
  2. <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
  3. <%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
  4. <html>
  5. <head>
  6. <title>Add Employee Form</title>
  7. <style>
  8. .error
  9. {
  10. color: #ff0000;
  11. font-weight: bold;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <h2><spring:message code="lbl.page" text="Add New Employee" /></h2>
  17. <br/>
  18. <form:form method="post" modelAttribute="employee">
  19. <%-- <form:errors path="*" cssClass="error" /> --%>
  20. <table>
  21. <tr>
  22. <td><spring:message code="lbl.firstName" text="First Name" /></td>
  23. <td><form:input path="firstName" /></td>
  24. <td><form:errors path="firstName" cssClass="error" /></td>
  25. </tr>
  26. <tr>
  27. <td><spring:message code="lbl.lastName" text="Last Name" /></td>
  28. <td><form:input path="lastName" /></td>
  29. <td><form:errors path="lastName" cssClass="error" /></td>
  30. </tr>
  31. <tr>
  32. <td><spring:message code="lbl.email" text="Email Id" /></td>
  33. <td><form:input path="email" /></td>
  34. <td><form:errors path="email" cssClass="error" /></td>
  35. </tr>
  36. <tr>
  37. <td colspan="3"><input type="submit" value="Add Employee"/></td>
  38. </tr>
  39. </table>
  40. </form:form>
  41. </body>
  42. </html>

您还需要更新消息资源文件。

messages.properties

  1. lbl.page=Add New Employee
  2. lbl.firstName=First Name
  3. lbl.lastName=Last Name
  4. lbl.email=Email Id
  5. //Error messages
  6. error.firstName=First Name can not be blank
  7. error.lastName=Last Name can not be blank
  8. error.email=Email Id can not be blank

4.2. 修改的SubmitForm()方法

EmployeeController.java

  1. @RequestMapping(method = RequestMethod.POST)
  2. public String submitForm(@ModelAttribute("employee") EmployeeVO employeeVO,
  3. BindingResult result, SessionStatus status)
  4. {
  5. //Validation code start
  6. boolean error = false;
  7. System.out.println(employeeVO); //Verifying if information is same as input by user
  8. if(employeeVO.getFirstName().isEmpty()){
  9. result.rejectValue("firstName", "error.firstName");
  10. error = true;
  11. }
  12. if(employeeVO.getLastName().isEmpty()){
  13. result.rejectValue("lastName", "error.lastName");
  14. error = true;
  15. }
  16. if(employeeVO.getEmail().isEmpty()){
  17. result.rejectValue("email", "error.email");
  18. error = true;
  19. }
  20. if(error) {
  21. return "addEmployee";
  22. }
  23. //validation code ends
  24. //Store the employee information in database
  25. //manager.createNewRecord(employeeVO);
  26. //Mark Session Complete
  27. status.setComplete();
  28. return "redirect:addNew/success";
  29. }

5. Spring MVC 示例 – 演示

在测试之前,请添加其他基本文件。

5.1. Spring MVC 配置文件

spring-servlet.xml

  1. <beans xmlns="http://www.springframework.org/schema/beans"
  2. xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context"
  3. xsi:schemaLocation="http://www.springframework.org/schema/beans
  4. http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
  5. http://www.springframework.org/schema/context/
  6. http://www.springframework.org/schema/context/spring-context-3.0.xsd">
  7. <context:component-scan base-package="com.howtodoinjava.demo" />
  8. <bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter" />
  9. <bean class="org.springframework.web.servlet.mvc.annotation.DefaultAnnotationHandlerMapping" />
  10. <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
  11. <property name="prefix" value="/WEB-INF/views/" />
  12. <property name="suffix" value=".jsp" />
  13. </bean>
  14. <bean id="messageSource" class="org.springframework.context.support.ResourceBundleMessageSource">
  15. <property name="basename" value="messages" />
  16. </bean>
  17. </beans>

5.2. web.xml

  1. <web-app id="WebApp_ID" version="2.4"
  2. xmlns="http://java.sun.com/xml/ns/j2ee"
  3. xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  4. xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
  5. http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
  6. <display-name>Spring Web MVC Hello World Application</display-name>
  7. <servlet>
  8. <servlet-name>spring</servlet-name>
  9. <servlet-class>
  10. org.springframework.web.servlet.DispatcherServlet
  11. </servlet-class>
  12. <load-on-startup>1</load-on-startup>
  13. </servlet>
  14. <servlet-mapping>
  15. <servlet-name>spring</servlet-name>
  16. <url-pattern>/</url-pattern>
  17. </servlet-mapping>
  18. </web-app>

5.3. pom.xml

  1. <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  2. xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
  3. <modelVersion>4.0.0</modelVersion>
  4. <groupId>com.howtodoinjava.demo</groupId>
  5. <artifactId>springmvcexample</artifactId>
  6. <packaging>war</packaging>
  7. <version>1.0-SNAPSHOT</version>
  8. <name>springmvcexample Maven Webapp</name>
  9. <url>http://maven.apache.org</url>
  10. <dependencies>
  11. <dependency>
  12. <groupId>junit</groupId>
  13. <artifactId>junit</artifactId>
  14. <version>4.12</version>
  15. <scope>test</scope>
  16. </dependency>
  17. <!-- Spring MVC support -->
  18. <dependency>
  19. <groupId>org.springframework</groupId>
  20. <artifactId>spring-webmvc</artifactId>
  21. <version>4.1.4.RELEASE</version>
  22. </dependency>
  23. <dependency>
  24. <groupId>org.springframework</groupId>
  25. <artifactId>spring-web</artifactId>
  26. <version>4.1.4.RELEASE</version>
  27. </dependency>
  28. <!-- Tag libs support for view layer -->
  29. <dependency>
  30. <groupId>javax.servlet</groupId>
  31. <artifactId>jstl</artifactId>
  32. <version>1.2</version>
  33. <scope>runtime</scope>
  34. </dependency>
  35. <dependency>
  36. <groupId>taglibs</groupId>
  37. <artifactId>standard</artifactId>
  38. <version>1.1.2</version>
  39. <scope>runtime</scope>
  40. </dependency>
  41. </dependencies>
  42. <build>
  43. <finalName>springmvcexample</finalName>
  44. </build>
  45. </project>

现在测试应用程序。

1)输入 URL:http://localhost:8080/springmvcexample/employee-module/addNew:它将显示空白表格。

Spring MVC 示例 – 显示,验证和提交表单 - 图2

Spring MVC 表单示例 – 空白表单

2)填写名字字段,然后单击“添加员工”按钮。 这将列出不能将姓氏和电子邮件字段提交为空白的验证消息。

Spring MVC 示例 – 显示,验证和提交表单 - 图3

Spring MVC 表单示例 – 验证消息

3)现在正确填写所有三个值,并提交表格。 现在您将能够看到成功消息。

Spring MVC 示例 – 显示,验证和提交表单 - 图4

Spring MVC 表单示例 – 成功消息

以上就是这个基本但重要的 spring mvc crud 示例,它涉及在 Spring MVC 中提交表单。 让我继续发布有关您的疑问和建议的信息。

下载源码

学习愉快!