Spring Boot+Thymeleaf下拉框校验后手机号回显问题

我来帮你解决这个手机号回显的问题！核心原因是你的Thymeleaf表单绑定没有正确使用双向绑定特性，导致提交后无法从返回的device对象中读取之前输入的值回显到表单里。下面是具体的修复步骤：

1. 修复手机号输入框的绑定 #

你的手机号输入框同时用了th:text和th:field，这会导致冲突——th:text是用来渲染元素的文本内容，而input的value应该由th:field自动处理。把输入框代码改成这样：

<input type="text" class="form-control" id="mobileNum" autofocus="autofocus" th:field="*{mobileNum}"/>

th:field会自动帮你设置name、id和value属性，并且会从${device}对象中读取mobileNum的值来完成回显。

2. 修复下拉框的绑定 #

你的下拉框没有使用th:field绑定到device对象的supportAction属性，这不仅会影响回显，还可能导致表单提交时的绑定不够严谨。修改下拉框代码：

<select class="form-control" th:field="*{supportAction}">
    <option th:value="none_selected">Please Select ...</option>
    <option th:value="actOne">Action One</option>
    <option th:value="actTwo">Action Two</option>
</select>

这里要去掉手动设置的selected="true"，因为th:field会根据device对象中的supportAction值自动选中对应的选项——当用户提交了none_selected时，下拉框会自动回到"Please Select..."选项，完全符合你的需求。

为什么这样修改能解决问题？ #

Thymeleaf的th:field是双向绑定的核心，它会自动关联表单字段和后端模型对象的属性：

• 渲染页面时，从模型对象中读取属性值填充到表单
• 表单提交时，把用户输入的值绑定到模型对象的对应属性

你之前的写法没有充分利用这个特性，导致回显逻辑失效。现在修改后，只要你的控制器已经把用户提交的device对象（包含输入的手机号）放回ModelAndView中，页面就能正确回显手机号了。

测试一下：输入手机号，不选操作直接提交，页面刷新后手机号会保留，错误信息正常显示，下拉框回到初始选项，完全符合你的预期。

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