Spring Boot从Freemarker迁移到Thymeleaf时表单校验如何动态修改input的class

你可以通过Thymeleaf提供的th:classappend属性实现类的动态追加，这是最适配你当前场景的方案，不会覆盖input标签原本的基础类：

<label for="inputFirstName" class="sr-only">First Name</label>
<input type="text" name="firstName" id="inputFirstName"
       class="form-control"
       th:classappend="${firstNameError != null} ? 'is-invalid' : ''"
       placeholder="First Name" required autofocus>
<div class="text-left invalid-feedback m-1 ml-1" th:if="${firstNameError}">
    <a th:text="${firstNameError}"></a>
</div>

th:classappend会在firstNameError存在时自动把is-invalid追加到原有class属性后，和你之前用Freemarker实现的效果完全一致。

如果你更习惯全量控制class属性，也可以用Thymeleaf的字面量拼接语法直接给th:class赋值：

<input type="text" name="firstName" id="inputFirstName"
       th:class="|form-control ${firstNameError != null ? 'is-invalid' : ''}|"
       placeholder="First Name" required autofocus>

两种方案都不需要修改你现有的后端校验逻辑，直接替换前端代码即可生效。

内容的提问来源于stack exchange，提问作者Allteran