譯：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教程