使用Thymeleaf的th:field后JS无法找到表单input01的问题排查

嘿，这个问题我之前也碰到过！核心原因是Thymeleaf的th:field属性会完全覆盖你手动设置的name属性——当你给input加上th:field="*{cost}"后，Thymeleaf渲染页面时，会把这个input的name替换成cost（和你绑定的实体类属性名一致），而不是你写的input01。所以JS里再找form01下的input01自然就找不到了，因为实际DOM里已经没有这个name的元素啦。

给你几个靠谱的解决办法：

方法1：直接用Thymeleaf生成的name获取值 #

既然Thymeleaf把name改成了cost，那直接在JS里用这个name来获取就行：

function check() { 
  let inputVal = document.forms["form01"]["cost"].value; 
  // 你的校验逻辑
}

方法2：给input加固定id，通过id获取（更推荐） #

手动给input加一个id属性，因为Thymeleaf不会覆盖你设置的id，这样不管name怎么变，都能稳定找到元素：
修改后的input标签：

<input type="text" name="input01" th:field="*{cost}" id="input01">

对应的JS代码：

function check() { 
  let inputVal = document.getElementById("input01").value; 
  // 后续校验逻辑
}

方法3：动态获取Thymeleaf生成的name（适合复杂场景） #

如果需要动态适配实体类属性名，可以用Thymeleaf的表达式直接获取生成的name：

function check() { 
  // 用Thymeleaf表达式拿到绑定属性对应的name
  let inputName = "[[${#fields.name('cost')}]]";
  let inputVal = document.forms["form01"][inputName].value; 
}

总结一下，你不是操作错误，只是没注意到th:field的这个特性——它是Thymeleaf实现双向数据绑定的核心，会自动管理input的name、id和value，所以手动设置的name会被覆盖哦～

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