Spring入門コンテンツ Validating Form Input（フォーム入力の検証）をインポートする方法と解説

2019-04-04T17:01:00+09:00 2019-04-13T16:48:12Z Eclipse Spring

ここでは、
Spring入門コンテンツ「Validating Form Input（フォーム入力の検証）」をインポートする方法と、このコンテンツについて、紹介します。

動作環境

以下の環境に入門コンテンツをインポートしました。

・Windows10 64bit

・Eclipse 2018-12（Eclipse 4.10）

・Java 8

・Spring Boot 2.1.3（Spring Tool Suite 4）

※下記の記事で構築した開発環境を利用

Spring Tool Suite 4の開発環境構築（Eclipseにインストール）｜STS4

入門コンテンツのインポート

まず、Eclipseで「ファイル」>「新規」>「その他」を選択します。「ウィザードを選択」画面で、「Spring 入門コンテンツのインポート」を選択して、「次へ」ボタンをクリックします。

次に、「入門コンテンツのインポート」画面で「Validating Form Input」を選択して、「完了」ボタンをクリックして、インポートします。

・ビルドタイプ

Mavenを選択

・コードセット

初期、起動にチェック

初期：プロジェクト「gs-validating-form-input-initial」をインポート

起動：プロジェクト「gs-validating-form-input-complete」をインポート

*この記事では、プロジェクト「gs-validating-form-input-complete」について、紹介します。

最後に、入門コンテンツ「Validating Form Input」がインポートされたことを確認します。

Validating Form Input（フォーム入力の検証）

この入門コンテンツでは、Springでフォーム入力の検証をする方法を学習します。

Spring Boot アプリケーションの起動

「gs-validating-form-input-complete」を右クリックして、「実行」>「Spring Boot App」を選択します。

コンソールに以下の情報が出力されていることを確認して、Spring Boot アプリケーションが起動したことを確認します。

・出力情報

yyyy-MM-dd hh:mm:ss.SSS INFO NNNN --- [ main] hello.Application : Starting Application on DESKTOP-NT3OSNK with PID 9852 (C:\eclipse_jee_201812\workspace\gs-validating-form-input-complete\target\classes started by ryuta in C:\eclipse_jee_201812\workspace\gs-validating-form-input-complete)
...
yyyy-MM-dd hh:mm:ss.SSS INFO NNNN --- [ main] hello.Application : Started Application in NN.NNN seconds (JVM running for NN.NNN)

画面操作

Spring Boot アプリケーション起動後、ブラウザで「http://localhost:8080/」にアクセスすると、フォーム画面が表示されます。フォーム画面でフォーム情報を入力して、「Submit」ボタンをクリックすると、検証エラーとなる場合は、フォーム画面にエラー情報が表示されます。

フォーム画面でフォーム情報を入力して、「Submit」ボタンをクリックすると、検証エラーがない場合は、結果画面が表示されます。

コントローラ（Controller）

・コントローラクラス

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

WebControllerクラスは、コントローラクラスとして動作します。

addViewControllersメソッド

パラメータ
ViewControllerRegistry

戻り値
なし

リクエストURLとビューのマッピングを定義します。ここでは、リクエストURL「/results」を結果画面「results.html」と紐付けています。

showFormメソッド

パラメータ
フォーム情報（PersonForm）

戻り値
ビュー名（フォーム画面「form.html」）

ブラウザで「http://localhost:8080/」にアクセスすると、このメソッドが実行されます。

遷移先画面のビュー名を返します。

checkPersonInfoメソッド

パラメータ：
入力検証対象（PersonForm）
入力検証結果（BindingResult）

戻り値
ビュー名（フォーム画面「form.html」）
またはリダイレクトURL「/results」

入力検証対象（PersonForm）のフィールドの入力検証を行い、検証結果によって、該当する遷移先画面のビュー名を返します。

アノテーションについて

@Controller：コントローラクラスに付与するアノテーション

@Override：オーバーライドするメソッドに付与するアノテーション

@GetMapping：メソッドとGETリクエストURLを紐付けるアノテーション

@PostMapping：メソッドとPOSTリクエストURLを紐付けるアノテーション

@Valid：検証対象に付与するアノテーション

フォーム（Form）

・フォームクラス

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クラスで以下の入力検証を指定します。

nameフィールド

必須チェック
nullの場合、検証エラー

桁数チェック
指定された桁数以外の場合、検証エラー

ageフィールド

必須チェック
nullの場合、検証エラー

最小値チェック
指定された最小値未満の場合、検証エラー

アノテーションについて

@NotNull：null不可を指定

@Size：桁数を指定

@Min：数値の最小値を指定

ビュー（View）

この入門コンテンツでは、テンプレートエンジンにThymeleafを使用しています。

・フォーム画面「form.html」

「submit」ボタン：フォーム情報をPOST送信して、検証結果によって、該当する画面を表示します。

<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>

th:action="@{/}"

action属性に「/」を指定します。

th:object="${personForm}"

PersonFormクラスのオブジェクトを宣言します。宣言したタブ内にて、下記のように、「th:field="${personForm.name}"」ではなく、「th:field="*{name}"」で記述することができます。

th:field="*{name}"

id属性とname属性に「name」（PersonFormクラスのnameフィールドの変数名）、value属性にPersonFormクラスのnameフィールドの変数値を指定します。

th:if="${#fields.hasErrors('name')}" th:errors="*{name}"

nameフィールドの検証結果をチェックして、検証エラーの場合は、エラー情報を表示します。

th:field="*{age}"
th:if="${#fields.hasErrors('age')}"
th:errors="*{age}"

上記の「name」と同様

・結果画面「results.html」

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

メモ

入門コンテンツ「Validating Form Input」では、BeanValidation（JSR-303）の@Validアノテーションを使用していますが、Springには@Validatedアノテーションがあります。用途に応じて、どちらを使用するか選択します。

参考

Validating Form Input - Spring

Spring入門コンテンツ Validating Form Input（フォーム入力の検証）をインポートする方法と解説

0 件のコメント :

コメントを投稿