Thymeleaf日期字段输入D/M格式时如何自动添加前导零转为DD/MM

你之前尝试的Thymeleaf th:if 方案属于服务端渲染逻辑，仅在页面首次加载、服务端生成HTML时执行，无法处理用户在浏览器端输入的动态内容，因此无法生效。另外label的for属性仅用于实现点击label时聚焦对应输入框的功能，不承担传值作用，也无法通过在label上加th:if逻辑给输入框传值。

正确实现方案如下：

1 修改Thymeleaf模板 #

保留原有输入结构，新增隐藏字段存储拼接完成的标准格式日期，同时给输入框添加事件触发逻辑：

<div class="m-form-row__content">
    <ul class="m-textbox-group" data-module="a-autojump">
        <li class="m-textbox-group__item">
            <label class="m-textbox-group__item-label" for="pHolder.dobDay">日</label>
            <input type="text" id="pHolder.dobDay"
                th:field="*{pHolder.dobDay}" placeholder="DD"
                class="a-textbox a-textbox--2-character" maxlength="2"
                onblur="padZero(this)" onchange="joinDOBVal()" />
        </li>
        <li class="m-textbox-group__item">
            <label class="m-textbox-group__item-label" for="pHolder.dobMonth">月</label>
            <input type="text" id="pHolder.dobMonth"
                th:field="*{pHolder.dobMonth}" placeholder="MM"
                class="a-textbox a-textbox--2-character" maxlength="2"
                onblur="padZero(this)" onchange="joinDOBVal()" />
        </li>
        <li class="m-textbox-group__item">
            <label class="m-textbox-group__item-label" for="pHolder.dobYear">年</label>
            <input type="text" id="pHolder.dobYear"
                th:field="*{pHolder.dobYear}" placeholder="YYYY"
                class="a-textbox a-textbox--4-character" maxlength="4"
                onchange="joinDOBVal()" />
        </li>
    </ul>
    <!-- 隐藏字段存储完整DD/MM/YYYY格式日期，直接提交给后端 -->
    <input type="hidden" th:field="*{pHolder.dob}" id="pHolder.dob" />
</div>

2 添加JS逻辑 #

// 自动给1位的日、月补前导零
function padZero(input) {
    let val = input.value.trim();
    if (val && /^\d$/.test(val) && val !== '0') {
        input.value = '0' + val;
    }
}

// 数字校验函数
function IsNumeric(val) {
    return /^\d+$/.test(val);
}

// 拼接完整日期写入隐藏字段
function joinDOBVal() {
    let day = document.getElementById("pHolder.dobDay").value.trim();
    let month = document.getElementById("pHolder.dobMonth").value.trim();
    let year = document.getElementById("pHolder.dobYear").value.trim();
    let fullDobInput = document.getElementById("pHolder.dob");

    if (IsNumeric(day) && IsNumeric(month) && IsNumeric(year)) {
        // 确保日、月都是2位
        if(day && day.length === 1 && day !== "0") {
            day = "0" + day;
            document.getElementById("pHolder.dobDay").value = day;
        }
        if(month && month.length === 1 && month !== "0") {
            month = "0" + month;
            document.getElementById("pHolder.dobMonth").value = month;
        }
        // 年必须是4位才拼接完整日期
        if (year && year.length === 4) {
            fullDobInput.value = `${day}/${month}/${year}`;
            return;
        }
    }
    // 校验不通过清空隐藏字段
    fullDobInput.value = "";
}

如果需要更稳妥的兜底，可以在后端接收参数时再做一次补零处理，避免前端JS被禁用时出现格式问题。

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