译：8. 表单校验输入

时间  2019-11-06
标签 表单 校验 输入 栏目 HTML 繁體版
原文   原文链接

本指南将指导您完成配置Web应用程序表单以支持验证的过程。Validating Form Inputhtml

1. 您将构建什么？

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

2. 您将须要准备什么？

3. 怎么完成这个指南？

1. 打开STS, New ————> Import Spring Getting Started Contentmvc

 

2.  输入va 搜索找到 Validating Form Input 

Tips: Build Type: Maven 表示咱们建立的是Maven项目

Code Sets: 为了更好学习咱们把两个对勾都打上对勾，这样能够生成一个写好的项目和一个空的项目，方便咱们模仿学习。

3. 建立一个PersonForm对象

该应用程序涉及验证用户的姓名和年龄，所以首先您须要建立一个班级以备份表单以建立人员。

src/main/java/hello/PersonForm.java

package hello;

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 + ")";
    }
}

PersonForm类有两个属性：名称和年龄。 它被标记为几个标准验证注释：

  • @Size（min = 2，max = 30）只容许长度在2到30个字符之间的名称
  • @NotNull将不容许空值，这是Spring MVC在条目为空时生成的值
  • 若是年龄小于18岁，@Min（18）将不容许

除此以外，您还能够看到名字和年龄的getters / setter以及方便的toString（）方法。

4. 建立一个Web controller

如今您已经定义了一个窗体支持对象，如今能够建立一个简单的Web控制器了

src/main/java/hello/WebController.java

package hello;

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

这个控制器有一个GET和一个POST方法，都映射到/。

showForm方法返回表单模板。 它在其方法签名中包含一个PersonForm，所以该模板能够将表单属性与PersonForm相关联。

checkPersonFormInfo方法接受两个参数：

personForm对象用@Valid标记，以收集您即将构建的表单中填写的属性。

bindingResult对象，所以您能够测试并检索验证错误。

您能够从绑定到PersonForm对象的表单中检索全部属性。 在代码中，您测试错误，若是是，请将用户发回原始表单模板。 在那种状况下，显示全部的错误属性。

若是全部人的属性都是有效的，那么它会将浏览器重定向到最终结果模板。

5, 构建一个HTML前端

src/main/resources/templates/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>

该页面包含一个简单的表格，每一个字段位于表格的一个单独的插槽中。 该表格适用于发布到/。 它被标记为由您在Web控制器的GET方法中看到的personForm对象备份。 这被称为bean-backed form。 在PersonForm bean中有两个字段，您能够看到它们标记为th：field =“{name}”和th：field =“{age}”。 每一个字段旁边是用于显示任何验证错误的次要元素。

最后，你有一个提交按钮。 通常来讲，若是用户输入的名称或年龄违反了@Valid约束条件，它将会弹出回到此页面并显示错误消息。 若是输入有效的姓名和年龄，用户将被路由到下一个网页。

src/main/resources/templates/results.html

<html>
    <body>
        Congratulations! You are old enough to sign up for this site.
    </body>
</html>

在这个简单的例子中，这些网页没有任何复杂的CSS或JavaScript。 可是对于任何制做网站，了解如何设计网页风格都颇有价值。

6. 建立一个应用程序类

对于此应用程序，您正在使用Thymeleaf的模板语言。 此应用程序须要比原始HTML更多

src/main/java/hello/Application.java

package hello;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class Application {

    public static void main(String[] args) throws Exception {
        SpringApplication.run(Application.class, args);
    }

}

要激活Spring MVC，您一般会将@EnableWebMvc添加到Application类。 可是当Spring Boot的@SpringBootApplication检测到classpath上的spring-webmvc时，它已经添加了这个注释。 一样的注释容许它找到带注释的@Controller类及其方法。

Thymeleaf配置也由@SpringBootApplication负责：默认状况下，模板位于templates /下的类路径中，并经过从文件名中去除“.html”后缀来解析为视图。 根据您须要达到的要求，能够以各类方式更改和覆盖Thymeleaf设置，但细节与本指南无关。

7.构建一个可执行的JAR

您可使用Gradle或Maven从命令行运行应用程序。 或者您能够构建一个包含全部必需的依赖项，类和资源的可执行JAR文件，并运行该文件。 这使得在整个开发生命周期内跨越不一样环境等，将服务做为应用程序发布，版本化和部署变得很是容易。

若是您正在使用Gradle，则可使用./gradlew bootRun运行该应用程序。 或者您可使用./gradlew构建构建JAR文件。 而后你能够运行JAR文件：

java -jar build/libs/gs-validating-form-input-0.1.0.jar

若是您使用的是Maven，则可使用./mvn spring-boot：run来运行该应用程序。 或者您可使用./mvn clean包构建JAR文件。 而后你能够运行JAR文件：

java -jar target/gs-validating-form-input-0.1.0.jar

上述过程将建立一个可运行的JAR。 您也能够选择构建经典的WAR文件。

他的应用程序应该在几秒钟内启动并运行。

若是你访问 http://localhost:8080/ ，你应该看到这样的内容：

若是您输入A做为姓名，15岁输入您的年龄并点击提交，会发生什么？

 

在这里你能够看到，由于它违反了PersonForm类中的约束条件，因此你会跳回到“main”页面。 若是您在输入框中单击“无提交”提交，则会获得不一样的错误。

 若是您输入有效的姓名和年龄，则最终显示在结果页面上！

恭喜！ 你已经编写了一个简单的Web应用程序，内置了一个域对象的验证。 经过这种方式，您能够确保数据符合特定条件而且用户正确输入。

源码：点击查看

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程