[[FrontPage]] > [[Spring Bootの覚書]]
#contents
* 入力チェック [#x01c1898]
以下のような画面を考える。~
~
#ref(sbvd-page1.png)
- 名前は必須で5文字以下とする。
- 年齢は0以上の整数とする。
- 入力にエラーがある場合は入力域の背景色を赤にし、横にエラーメッセージを表示する。
** 1. 画面の作成(Thymeleaf) [#b7ecdfba]
- 画面を作成する。~
~
(src/main/resources/templates/validSample.html)
#sh(html){{
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link th:href="@{/resources/css/base.css}" rel="stylesheet" type="text/css" />
<title>validation Sample</title>
</head>
<body>
  <a th:href="@{/}">Topページ</a>
  <hr />
  <form th:action="@{/validSample}" th:object="${form}" method="post">
    <table>
      <tr>
        <td>名前:</td>
        <td>
          <input type="text" th:field="*{name}" th:errorclass="fieldError" />
        </td>
        <td th:if="${#fields.hasErrors('name')}" th:errors="*{name}"
          style="color: red"></td>
      </tr>
      <tr>
        <td>年齢:</td>
        <td>
          <input type="text" th:field="*{age}" th:errorclass="fieldError" />
        </td>
        <td th:if="${#fields.hasErrors('age')}" th:errors="*{age}"
          style="color: red"></td>
      </tr>
    </table>
    <input type="submit" value="送信" />
  </form>
</body>
</html>
}}
~
(src/main/resources/static/resources/css/base.css抜粋)
#sh(css){{
.fieldError {
  background-color: #ff8080;
}
}}
** 2. フォームクラスの作成 [#w3685eaa]
- 入力値を保持するBeanクラスを作成し、各フィードに検証用のアノテーションを記述する。~
~
(src/main/java/com/ziqoo/sbSample/web/form/ValidSampleForm.java抜粋)
#sh(java){{
public class ValidSampleForm {
    @NotBlank
    @Size(max=5)
    private String name;

    @Pattern(regexp="[0-9]*")
    private String age;
}}
** 3. コントローラクラスの作成 [#j17c4ac0]
- 入力の検証を行う引数に対して@Validを付与する。検証結果は引数のBindingResultで受け取る。~
以下の例では発生したエラーコードをログに出力している。~
~
(src/main/java/com/ziqoo/sbSample/web/ValidSampleContrller.java)
#sh(java){{
package com.ziqoo.sbSample.web;

import javax.validation.Valid;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.validation.FieldError;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import com.ziqoo.sbSample.web.form.ValidSampleForm;

@Controller
public class ValidSampleContrller {
    private static final Logger log = LoggerFactory
.getLogger(ValidSampleContrller.class);

    @RequestMapping(value="/validSample", method = RequestMethod.GET)
    public String dispValidSample(@ModelAttribute("form") ValidSampleForm form, Model model) {
        return "validSample";
    }

    @RequestMapping(value="/validSample", method = RequestMethod.POST)
    public String postValidSample(@ModelAttribute("form") @Valid ValidSampleForm form, BindingResult result, Model model) {

        if (result.hasErrors()) {
            for(FieldError err: result.getFieldErrors()) {
                log.debug("error code = [" + err.getCode() + "]");
            }
        }
        return "validSample";
    }
}
}}
- 実行すると以下のようになる。~
~
#ref(sbvd-page2.png)
~
~

トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS