通过 Thymeleaf 实现字段验证(从 Freemarker 迁移到 Thymeleaf)

Posted

技术标签:

【中文标题】通过 Thymeleaf 实现字段验证(从 Freemarker 迁移到 Thymeleaf)【英文标题】:Implement field validation via Thymeleaf (migrate from Freemarker to 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&lt;String, String&gt; errors 将保留所有错误。例如,如果用户在注册时不会填写字段firstName,则地图将包含"firstNameError" -&gt; "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&lt;input... 以突出显示有错误的恶魔?

谢谢!

【问题讨论】:

【参考方案1】:

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

&lt;input type="text" name="firstName" id="inputFirstName" th:classappend="$condition ? conditionTrueClass : conditionFalseClass "/&gt;

请看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

【讨论】:

以上是关于通过 Thymeleaf 实现字段验证(从 Freemarker 迁移到 Thymeleaf)的主要内容,如果未能解决你的问题,请参考以下文章

Spring Boot thymeleaf 验证不起作用

Springboot+thymeleaf实现验证码

Springboot+thymeleaf实现验证码

如何在 Thymeleaf 中显示从“选择”到“文本字段”的选定项目?

不同“接受”内容类型标头字段的不同身份验证

如何在单元测试期间通过 Thymeleaf 模板的身份验证