通过 Thymeleaf 实现字段验证（从 Freemarker 迁移到 Thymeleaf）答案

【问题标题】：Implement field validation via Thymeleaf (migrate from Freemarker to Thymeleaf)通过 Thymeleaf 实现字段验证（从 Freemarker 迁移到 Thymeleaf）
【发布时间】：2021-12-21 05:04:32
【问题描述】：

我正在开发一个带有用户登录和注册的小型 Spring Boot 应用程序。我想用字段验证实现我自己的注册系统。为了验证，我在控制器中使用了我自己的org.springframework.validation.Validator 实现。 Vaidator 在控制器中捕获来自bindingResult 的所有错误并将其发送到model 字段中的前端：

@PostMapping("/registration")
    public String signUpUser(User userForm, BindingResult bindingResult,
                             Model model) {
        validator.validate(userForm, bindingResult);

        if(bindingResult.hasErrors()) {
            Map<String, String> errors = ControllerUtils.getFieldErrors(bindingResult);
            model.mergeAttributes(errors);
            return "registration";
        }
        return "registration";

如果有任何验证错误，Map<String, String> errors 将保留所有错误。例如，如果用户在注册时不会填写字段firstName，则地图将包含"firstNameError" -> "Please, fill the field"等对象。

在我之前的项目中，我使用 Freemarker 作为模板引擎，并且某些元素的前端代码看起来像这样：

 <label for="inputFirstName" class="sr-only">First Name</label>
    <input type="text" name="firstName" id="inputFirstName"
           class="form-control ${(firstNameError??)?string('is-invalid','')}"
           placeholder="First Name" required autofocus>
    <div class="text-left invalid-feedback m-1 ml-1">
        <#if (firstNameError)??>
            ${firstNameError}
        </#if>
    </div>

因此，当我的用户名出现错误时 - 我的输入将类更改为 class="form control is-invalid" 并突出显示有错误的字段，然后在 div 中显示错误消息

现在我使用 Thymeleaf 作为模板引擎。为了显示我使用的错误文本

<div th:if="${firstNameError}" class="invalid-feedback">
        <a th:text="${firstNameError}"></a>
    </div>

但是如何动态更改 class 或 <input... 以突出显示有错误的恶魔？

谢谢！

【问题讨论】：

标签： java spring frontend thymeleaf

【解决方案1】：

您可以像这样使用 thymeleaf classappend th:classappend：

<input type="text" name="firstName" id="inputFirstName" th:classappend="${condition} ? conditionTrueClass : conditionFalseClass "/>

请看this answer。

【讨论】：

【解决方案2】：

你需要在你的类中使用条件语句来评估它是否应该使用“错误类”

例子：

<p  th:if="${#fields.hasErrors('age')}" th:class="${#fields.hasErrors('age')}? error">Invalid Age</p>

<style>
    .error {
        color: red;
    }
</style>

另一个 Thymeleaf 属性 th:errors 使我们能够显示指定选择器上的所有错误，比如电子邮件：

<div>
    <label for="email">Email</label> <input type="text" th:field="*{email}" />
    <p th:if="${#fields.hasErrors('email')}" th:errorclass="error" th:errors="*{email}" />
</div>

参考：https://www.baeldung.com/spring-thymeleaf-error-messages

【讨论】：