验证表单输入

关注

翻译最新推荐文章于 2026-09-22 15:23:30 发布 4.6k 阅读 AI 写同款· GEO 优化 ›

掌握HTML表单验证与输入类型本文深入探讨了HTML中的表单验证与输入类型，包括上传按钮的功能缺失、表单验证的概念以及不同类型的输入字段，如日期、电子邮件、URL和搜索。文章通过实际代码示例和解释，帮助读者理解如何在网页中应用这些技术，以及如何通过CSS改善网页的外观和功能。阅读详情

你需要什么

大约 15 分钟
IntelliJ IDEA或其他编辑器
JDK 1.8或更高版本
Maven 3.2+

你会建立什么

您将构建一个简单的Spring MVC应用程序，它接受用户输入并使用标准验证注解检查输入。您还将看到如何在屏幕上显示错误消息，以便用户可以重新输入有效的输入。

构建步骤

1、添加maven依赖。

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

        <!-- 表单验证模块 -->
        <dependency>
            <groupId>org.hibernate.validator</groupId>
            <artifactId>hibernate-validator</artifactId>
        </dependency>
        <dependency>
            <groupId>org.apache.tomcat.embed</groupId>
            <artifactId>tomcat-embed-el</artifactId>
        </dependency>

2、创建一个PersonForm对象


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;

    public String getName() {
        return this.name;
    }

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

    public Integer getAge() {
        return age;
    }

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

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

@Size（min = 2, max = 30） 只允许长度在2到30个字符之间的名称
@NotNull 将不允许空值
@Min（18）将不允许值小于18

3、创建一个Web Controller

import javax.validation.Valid;

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;


@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";
    }
}

checkPersonFormInfo方法接受两个参数：

personForm 对象用 @Valid 标记，以收集您即将构建的表单中填写的属性。
bindingResult 对象，因此您可以测试并检索验证错误。

4、构建一个HTML表单

<html >
<meta charset="UTF-8" />
<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>