如何在Thymeleaf中处理减法实现动态注册表单21周岁年龄校验

你需要分别实现前端实时校验和后端二次校验两层逻辑，避免前端校验被绕过：

1. 前端校验实现（SignUp.html新增代码） #

在你的表单闭合标签之后新增JS监听逻辑，监听表单提交事件，对标记了validation="dob"的出生日期字段做年龄计算：

<script>
document.getElementById('form_signup').addEventListener('submit', function(e) {
  // 获取出生日期输入框
  const dobInput = document.querySelector('input[data-validation="dob"]');
  if (!dobInput || !dobInput.value) return;
  
  const dob = new Date(dobInput.value);
  const now = new Date();
  
  // 计算精确年龄，考虑月份和日期是否满周岁
  let age = now.getFullYear() - dob.getFullYear();
  const monthDiff = now.getMonth() - dob.getMonth();
  if (monthDiff < 0 || (monthDiff === 0 && now.getDate() < dob.getDate())) {
    age--;
  }
  
  // 不满21周岁阻止提交
  if (age < 21) {
    e.preventDefault();
    alert('需年满21周岁才可完成注册');
    dobInput.focus();
    return false;
  }
})
</script>

同时要给出生日期输入框加上data-validation属性方便JS定位，修改dob对应的input标签：

<input class="form-control" th:id="${item.name}" th:name="${item.name}" th:placeholder="${item.placeholder}" th:required="${item.required}"
th:type="${item.type}" th:attr="max=${#dates.format(#dates.createNow(), 'MM-dd-yyyy')},data-validation=${item.validation}"/>

2. 后端校验实现（Kotlin侧） #

前端校验可被篡改绕过，必须在后端接口接收参数时增加二次校验：

2.1 新增年龄计算工具方法 #

import java.time.LocalDate
import java.time.Period

// 计算年龄工具方法
fun calculateAge(dob: LocalDate): Int {
    val now = LocalDate.now()
    val age = Period.between(dob, now).years
    return if (age < 0) 0 else age
}

2.2 表单提交接口增加校验逻辑 #

在接收注册表单的接口中，提取出生日期字段调用上面的方法判断：

// 假设你接收的表单参数里dob字段为LocalDate类型
val age = calculateAge(dob)
if (age < 21) {
    // 返回错误提示，终止注册流程
    throw IllegalArgumentException("需年满21周岁才可完成注册")
}

可选优化 #

你可以直接复用Form类的min字段，把出生日期对应的Form实例的min设为21，这样校验逻辑里不用写死21这个阈值，后续调整年龄限制只需要改表单配置即可。

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