Thymeleaf th:field核心详解

一、基本介绍

Thymeleaf是一个模板引擎。它的主要目的是为Web和独立环境创建HTML、XML、JavaScript、CSS和文本输出。它是在Java平台上执行的，但它的语法从未与Java平台交叉。Thymeleaf与Spring框架紧密集成，因此它在Spring MVC应用程序中的使用非常广泛。在Thymeleaf中，th:field是一个支持双向绑定的属性，它允许将表单字段与一个对象的属性相关联。

二、th:field与表单输入

Thymeleaf中的表单输入受到th:field属性的支持。在使用此属性时，可以将表单的值与后台对象绑定，以便在表单提交时可以自动填充对象属性。下面是一个示例，展示了如何使用th:field将表单与对象的属性绑定：

<form th:object="${user}">
  <!-- 绑定<input>元素与后台对象的firstName属性 -->
  <input type="text" th:field="*{firstName}" />
  <!-- 绑定<input>元素与后台对象的lastName属性 -->
  <input type="text" th:field="*{lastName}" />
</form>

在这个例子中，表单中的输入框被用th:field绑定到了user对象的属性上。*{firstName} 和 *{lastName}，它们代表了一个Spring MVC表单的空间绑定表达式，指定了绑定到模型对象的后面，在这种情况下是user对象的属性。这意味着，当用户提交表单时，表单值会自动填充到user的firstName和lastName属性中。

三、属性绑定的数据类型转换

Thymeleaf通过使用属性编辑器处理类型转换。属性编辑器是一个将表单中输入的字符串转换为对象属性类型的类。例如，当将一个字符串转换为Integer类型时，类似“12”或“45.6”这样的字符不能转换为整数。为了解决这个问题，Thymeleaf支持自定义属性编辑器来解决类型转换：

/**
 * 将字符串转换为ZonedDateTime类型
 */
public class ZonedDateTimeEditor extends PropertyEditorSupport {
    @Override
    public void setAsText(String text) {
        // 日期字符串转成DateTime类型
        DateTimeFormatter formatter = DateTimeFormatter.ofPattern("yyyy-MM-dd'T'HH:mm:ss.SSSZ");
        ZonedDateTime dateTime = ZonedDateTime.parse(text, formatter.withZone(ZoneId.systemDefault()));
        setValue(dateTime);
    }
}

在上述代码中，我们使用ZonedDateTimeEditor属性编辑器将字符串转换为ZonedDateTime类型，ZonedDateTime是Java8中处理带时区的日期和时间的类。我们重写了PropertyEditorSupport中的setAsText方法来执行字符串到ZonedDateTime类型的转换。一旦我们有了这个编辑器类，就可以将它注册到Thymeleaf中：

@Configuration
public class AppConfig {
    @Bean
    public SpringTemplateEngine templateEngine() {
        SpringTemplateEngine engine = new SpringTemplateEngine();
  
        // 使用thymeleaf的方言
        Set dialects = new HashSet<>();
        dialects.add(new SpringStandardDialect());
        dialects.add(new LayoutDialect());
        engine.setAdditionalDialects(dialects);
  
        // 注册属性编辑器
        Set
    formatters = new HashSet<>();
        formatters.add(new ZonedDateTimeFormatter());
        engine.setAdditionalFormatters(formatters);
        return engine;
    }
}

   
  

在这个例子中，我们将自定义属性编辑器注册到Thymeleaf中，然后将它们配置为SpringTemplateEngine的一个附加组件。这使得Thymeleaf能够找到这些类型转换程序，并在需要时使用它们。因此，这将允许Thymeleaf将输入字符串转换为我们需要的类型，例如ZonedDateTime。

四、表单验证

在表单中，为了提供更好的用户体验和错误预防机制，表单验证是必不可少的。Thymeleaf为表单验证提供了多个选项，其中之一是使用EasyValidation框架进行表单验证。

1. 添加EasyValidation依赖

首先，您需要将EasyValidation添加到您的项目中，在pom.xml中添加以下依赖项：

<dependency>
    <groupId>de.ahus1</groupId>
    <artifactId>easy-validation</artifactId>
    <version>2.0.0-SNAPSHOT</version>
</dependency>

2. 定义验证规则

在添加EasyValidation依赖项之后，我们需要定义要在表单上执行的验证规则。下面是一个规则定义的示例：

public class UserValidation extends Validator implements Serializable {
 
    private static final long serialVersionUID = 1L;
 
    @Override
    protected void configure() {
        super.configure();
 
        //检测年龄是否为空，是否在18-65之间
        constraintFor(User.class, "age")
            .notEmpty()
            .minValue(18) 
            .maxValue(65);
 
        //检测名字是否为空
        constraintFor(User.class, "name").notEmpty();
 
        //验证邮件地址是否合法
        constraintFor(User.class, "email").emailAddress();
    }
}

在这个例子中，我们定义了UserValidation类型来执行表单验证。这个验证器与一个User类型相关联。 我们定义了三项约束：age属性不能为空，必须大于18个月小于65年，name属性不能为空，email属性必须是一个有效的电子邮件地址。

3. 将约束绑定到表单

一旦我们定义了验证规则，我们需要将它们绑定到表单上。下面是一个模板示例，在视图中绑定验证约束：

    <form th:object="${user}" th:validate="${userValidation}" >
        <label>Age:</label>
        <input type="number" th:field="*{age}" />
        <small th:errors="*{age}">Age error message</small>
 
        <label>Name:</label>
        <input type="text" th:field="*{name}" />
        <small th:errors="*{name}">Name error message</small>
 
        <label>Email:</label>
        <input type="email" th:field="*{email}" />
        <small th:errors="*{email}">Email error message</small>
    </form>

在这个例子中，我们使用th:validate将UserValidation对象绑定到的表单上。现在，一个表单字段具有th:field属性，它绑定到我们的User对象的属性上。当表单提交时，如果任何约束失败，那么EasyValidation将向同一字段添加一个错误消息。使用th:errors指令可以在表单字段的下方添加错误消息。

五、使用Bootstrap样式

在Web应用程序中，使用漂亮的样式能大大提高用户体验。Bootstrap是一个强大的CSS框架，它为表单提供了很好的样式。在Thymeleaf中使用Bootstrap can是非常简单的。

1. 添加Bootstrap依赖

首先，您需要将Bootstrap添加到您的项目中，在pom.xml中添加以下依赖项：

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>bootstrap</artifactId>
    <version>4.3.1</version>
</dependency>

2. 链接Bootstrap样式表

添加了Bootstrap依赖项后，需要向HTML页面添加Bootstrap样式表。这可以通过在标记的底部添加以下代码实现：

   <link href="webjars/bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet">

3. 使用Bootstrap样式的表单

一旦您准备好包含Bootstrap样式，您可以建立一个使用Bootstrap样式的表单。下面是一个表单示例：

    <form th:object="${user}" th:validate="${userValidation}">
        <div class="form-group">
            <input type="text" th:field="*{name}" class="form-control" placeholder="Name">
            <small th:errors="*{name}" class="form-text text-danger"></small>
        </div>
 
        <div class="form-group">
            <input type="email" th:field="*{email}" class="form-control" placeholder="Email">
            <small th:errors="*{email}" class="form-text text-danger"></small>
        </div>
 
        <div class="form-group">
            <label>Birthday:</label>
            <input type="date" th:field="*{birthday}" class="form-control" placeholder="Birthday">
            <small th:errors="*{birthday}" class="form-text text-danger"></small>
        </div>
 
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>

在这个例子中，我们使用Bootstrap样式来改善表单的外观并增加响应性。