Spring Bootで簡単に入力チェックを実装する方法

Java Spring Boot

Spring Bootで簡単に入力チェックを実装する方法

Bean Validationを使用して入力チェックを実装する方法

「Spring Boot」でWebアプリケーションを作成する時、簡単に入力チェックが出来る方法があります。それが「Bean Validation」です。「Bean Validation」とはJavaBeansで簡単に入力チェックを行う仕組みです。

スポンサーリンク

本記事では「Bean Validation」を使用した入力チェックの方法を紹介します。

ディレクトリ構成

プロジェクトのディレクトリ構造は以下の通り。

springSample
└── src
└── main
├── java
│    └── com
│        └── example
│             └── demo
│                 ├── controller
│                 │   └── UserController.java
│                 └── dto
│                     └── UserRequest.java
└── resources
├── templates
│   └── user
│       └── add.html
└── static
└── css
└── add.css

Bean Validationで入力チェックを実装

データを格納する箱である「Data Transfer Object」を作成し、アノテーションを使用して入力チェックする内容を定義します。※本来エラーメッセージは、メッセージファイル等で管理しますが、本記事ではハードコーディングしています。

入力チェック内容は以下の通り。

  • 名前：必須、100桁以内
  • 住所：255桁以内
  • 電話番号：電話番号形式チェック

Bean Validationで定義するよく使うアノテーションは以下の通り。

アノテーション種類 チェック内容
@NotNull 必須チェック（NULLの場合NG）
@NotEmpty 必須チェック（NULL、空文字の場合NG）
@NotBlank 必須チェック（NULL、空文字、空白のみの場合NG）
@Size 桁数チェック
@Pattern 正規表現チェック

[UserRequest.java]

package com.example.demo.dto;

import java.io.Serializable;

import javax.validation.constraints.NotEmpty;
import javax.validation.constraints.Pattern;
import javax.validation.constraints.Size;

import lombok.Data;

/**
* ユーザー情報 リクエストデータ
*/
@Data
public class UserRequest implements Serializable {

/**
* 名前
*/
@NotEmpty(message = "名前を入力してください")
@Size(max = 100, message = "名前は100桁以内で入力してください")
private String name;

/**
* 住所
*/
@Size(max = 255, message = "住所は255桁以内で入力してください")
private String address;

/**
* 電話番号
*/
@Pattern(regexp = "0\d{1,4}-\d{1,4}-\d{4}", message = "電話番号の形式で入力してください")
private String phone;
}

Controllerでエラー内容を画面に返却する

フロントエンドとサーバーエンドの入出力の管理を行うControllerクラスを作成します。

[UserController]

package com.example.demo.controller;

import java.util.ArrayList;
import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.validation.ObjectError;
import org.springframework.validation.annotation.Validated;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import com.example.demo.dto.UserRequest;

/**
* ユーザー情報 Controller
*/
@Controller
public class UserController {

/**
* ユーザー新規登録画面を表示
* @param model Model
* @return ユーザー情報一覧画面
*/
@RequestMapping(value = "/user/add", method = RequestMethod.GET)
public String displayAdd(Model model) {
model.addAttribute("userRequest", new UserRequest());
return "user/add";
}

/**
* ユーザー新規登録
* @param userRequest リクエストデータ
* @param model Model
* @return ユーザー情報一覧画面
*/
@RequestMapping(value="/user/create", method=RequestMethod.POST)
public String create(@Validated @ModelAttribute UserRequest userRequest, BindingResult result, Model model) {
if (result.hasErrors()) {
List<String> errorList = new ArrayList<String>();
for(ObjectError error : result.getAllErrors()) {
errorList.add(error.getDefaultMessage());
}

model.addAttribute("validationError", errorList);
return "user/add";
}

// ユーザー情報の登録
userService.create(userRequest);
return "redirect:/user/list";
}
}

createメソッドの引数BindingResultに「Bean Validation」のエラー内容が設定されます。エラーがある場合はhasErrorsがtrueになるので、エラー内容をリストに詰めて画面側に返却します。

スポンサーリンク

HTMLでエラー内容を画面に表示する

画面のHTMLを作成します。

[add.html]

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
  <head>
    <title>ユーザー新規登録</title>
    <link href="/css/add.css" rel="stylesheet"></link>
    <meta charset="utf-8" />
  </head>
  <body>
  <table>
  	<tr th:if="${validationError}" th:each="error : ${validationError}">
  		<td style="color:red;" th:text="${error}"></td>
  	</tr>
  </table>
  	<h1>ユーザー新規登録</h1>
  	<form th:action="@{/user/create}" th:object="${userRequest}" th:method="post">
  		<a href="/user/list">キャンセル</a>
    <table>
      <tr>
        <th class="cell_title">名前</th>
        <th class="cell_required">※</th>
        <td><input type="text" th:field="*{name}"></td>
      </tr>
      <tr>
        <th class="cell_title">住所</th>
        <th class="cell_required"></th>
        <td><input type="text" th:field="*{address}"></td>
      </tr>
      <tr>
        <th class="cell_title">電話番号</th>
        <th class="cell_required"></th>
        <td><input type="text" th:field="*{phone}"></td>
      </tr>
    </table>
    <div class="btn_area_center"><input type="submit" value="登録" class="btn"></div>
  </form>
  </body>
</html>

[add.css]

body {
width: 80%;
}
table{
width: 100%;
border-collapse: collapse;
font-size: 13px;
}

table th, table td {
border: 1px solid #ddd;
padding: 6px;
}

table th {
background-color: #F2F2F2;
}

table input {
width:90%;
}
.cell_title {
border-right: 0;
}
.cell_required{
color: red;
font-size: 12px;
width: 10px;
border-left: 0;
}
.btn {
width: 100px;
text-align: center;
}
.btn_area_center {
margin-top: 20px;
text-align: center;
}

Webアプリケーションを実行して動作確認

1. 登録画面の表示

Spring Bootプロジェクトを実行して http://localhost:8080/user/add へアクセスします。

2. 登録画面にデータを入力し登録

ユーザー新規登録画面が表示されるので、以下の内容を入力して「登録」ボタンを押下します。

  • 名前：未入力
  • 住所：255桁より大きい値
  • 電話番号：電話番号形式ではない値

入力チェック前

3. エラーメッセージが表示されることを確認

入力チェックが正常に動作して、想定通りのエラーメッセージが表示されることを確認します。

画面上部に赤字で「Bean Validation」でエラーになった項目に対するエラーメッセージが表示されます。

入力チェック後

Copyright© ITを分かりやすく解説 , 2020 All Rights Reserved Powered by AFFINGER5.