通过 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<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...
以突出显示有错误的恶魔?
谢谢!
【问题讨论】:
【参考方案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
【讨论】:
以上是关于通过 Thymeleaf 实现字段验证(从 Freemarker 迁移到 Thymeleaf)的主要内容,如果未能解决你的问题,请参考以下文章