Spring Boot:表单输入验证

本fw决定写一篇教程向的文章，这篇文章会指导大家如何利用Spring Boot实现网页表单输入验证这样的一个简单的功能。

如图，这个简单的应用可以呈现出这样一个允许用户输入数据的页面：只有输入满足长度要求才会跳转到新的页面，否则会提示错误信息。

本fw用IDE是IntelliJ Idea，所以以Idea为例，向大家展示这个简易项目的全过程（from scratch）。

利用Spring Initializr创建一个Spring Boot项目

名字啥的随便起了，这个无关痛痒。java版本应该至少是java8，本fw电脑上只有jdk14，所以选择的版本是14.

这里需要添加两个依赖项，Spring Web和Thymeleaf（Thymeleaf是Spring推荐的一种页面模板语言）。

项目结构

pom.xml的具体配置

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.3.0.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>xyz.eternal.fire</groupId>
    <artifactId>validate-form-input</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>validate-form-input</name>
    <description>validate form input</description>

    <properties>
        <java.version>14</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

        <dependency>
            <groupId>org.hibernate.validator</groupId>
            <artifactId>hibernate-validator</artifactId>
            <version>6.1.5.Final</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>


    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

创建 一个PersonForm类

package xyz.eternal.fire;

import javax.validation.constraints.Min;
import javax.validation.constraints.NotNull;
import javax.validation.constraints.Size;

public class PersonForm {
    @NotNull
    @Size(min = 2, max = 30)
    private String name;

    @NotNull
    @Min(18)
    private Integer age;

    @Override
    public String toString() {
        return "Person(name:" + this.name + ", age:" + this.age + ")";
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Integer getAge() {
        return age;
    }

    public void setAge(Integer age) {
        this.age = age;
    }
}

值得一提的是，这个类有两个属性，一个是name，另一个是age，通过注解限定了name和age的合理取值范围，这个注解之后要搭配BindingResult使用。

创建一个WebController类

package xyz.eternal.fire;

import org.springframework.stereotype.Controller;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

import javax.validation.Valid;

@Controller
public class WebController implements WebMvcConfigurer {
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/results").setViewName("results");
    }

    @GetMapping("/")
    public String showForm(PersonForm personForm) {
        return "form";
    }

    @PostMapping("/")
    public String checkPersonInfo(@Valid PersonForm personForm, BindingResult bindingResult) {
        if (bindingResult.hasErrors()) {
            return "form";
        }
        return "redirect:/results";
    }
}

这个Controller有一个Get方法和Post方法，它们都被map到”/“下。

showForm方法返回form模板，它包含了一个PersonForm参数的目的是让模板可以把表格的属性和PersonForm这个类关联起来。

checkPersonFormInfo方法接受两个参数，PersonForm提供输入的数据，BindingResult和@Valid搭配，用以判断是否满足之前设置的长度限制。如果符合条件，就redirect到/results路径，否则返回form模板。

写HTML

form.html

<html>
<body>
<form action="#" th:action="@{/}" th:object="${personForm}" method="post">
    <table>
        <tr>
            <td>Name:</td>
            <td><input type="text" th:field="*{name}" /></td>
            <td th:if="${#fields.hasErrors('name')}" th:errors="*{name}">Name Error</td>
        </tr>
        <tr>
            <td>Age:</td>
            <td><input type="text" th:field="*{age}" /></td>
            <td th:if="${#fields.hasErrors('age')}" th:errors="*{age}">Age Error</td>
        </tr>
        <tr>
            <td><button type="submit">Submit</button></td>
        </tr>
    </table>
</form>
</body>
</html>

results.html

<html>
<body>
Congratulations! You have opened the door to the new world!
</body>
</html>

这两个html文件放在resources的templates目录下。

运行

Idea直接运行

打成jar包用命令行运行

先打包

用java -jar命令执行jar包即可，值得一提的是，生成的jar包放在项目的targe里。

结果

如果输入符合条件：

否则会提示响应的错误：