Spring Boot+Thymeleaf场景下验证失败后如何保留下拉框输入值

问题根因 #

校验失败返回makeLog视图时，POST请求的模型中没有携带waters、baits这类下拉选项的数据源，Thymeleaf渲染页面时找不到对应变量，就会出现下拉框为空的问题。

修复步骤 #

1. 补全POST接口的模型数据 #

给@PostMapping对应的makeLog方法增加Model入参，在校验失败返回页面前，重新填充下拉选项的数据源即可，修改后的代码如下：

@PostMapping("/makeLog")
public String makeLog(@ModelAttribute("logForm") FishJournal logForm,  
                      @RequestParam("image") MultipartFile multipartFile, 
                      BindingResult bindingResult,
                      Model model) throws IOException {
            
    journalValidator.validate(logForm, bindingResult);
    if(!multipartFile.isEmpty()) {
        pictureValidator.validate(multipartFile, bindingResult);
    }

    if (bindingResult.hasErrors()) {
        // 校验失败时重新填充下拉选项数据
        model.addAttribute("waters", waterService.findAll());
        model.addAttribute("baits", baitService.findAll());
        return "makeLog";
    }   

    // 原有保存逻辑不变
    Object principal = SecurityContextHolder.getContext().getAuthentication().getPrincipal();
    String username;
    if (principal instanceof UserDetails) {
        username = ((UserDetails)principal).getUsername();
    } else {
        username = principal.toString();
    }
    User currentUser=userService.findByUsername(username);

    logForm.setPath(pictureService.getFishPicUploadPath(multipartFile));
    logForm.setDate(new Date());
    logForm.setUsers(currentUser);
    journalService.save(logForm);

    return "redirect:/";
}

2. 代码优化（可选） #

为了避免GET和POST接口重复编写查询下拉数据的代码，可以把公共逻辑抽成私有方法复用：

// 抽离公共的下拉选项填充逻辑
private void loadFormOptions(Model model) {
    model.addAttribute("waters", waterService.findAll());
    model.addAttribute("baits", baitService.findAll());
}

@GetMapping("/makeLog")
public String makeLog(Model model) {
    if (!securityService.isAuthenticated()) {
        return "redirect:/login";
    }
    loadFormOptions(model);
    model.addAttribute("logForm", new FishJournal());
    return "makeLog";
}

// POST接口校验失败时也调用该方法
if (bindingResult.hasErrors()) {
    loadFormOptions(model);
    return "makeLog";
}

修改完成后，校验失败时下拉选项就会正常展示，之前用户选中的下拉值也会自动回显。

上传文件丢失的处理说明 #

受浏览器安全限制，同步提交表单后无法自动保留用户已选中的文件，有两种常用的解决方案：

• 前端改用AJAX异步提交表单，校验不通过时页面不刷新，用户已填写的内容和选中的文件都会保留
• 同步提交时后端先暂存上传的文件，校验失败后返回临时文件标识给前端展示已上传状态，用户无需重复上传，需自行实现临时文件的过期清理逻辑

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