如何在Thymeleaf中将JS获取的国际手机号传入DTO并提交表单

架构老林

2026-9-29

解决方案

你遇到的两个问题都可以通过修改process提交处理函数解决，具体逻辑和修改代码如下：

问题根源说明

表单无法提交：是因为你在process函数中调用了event.preventDefault()，主动阻止了表单的默认提交行为，处理完业务逻辑后需要手动触发提交。
插件手机号无法绑定到DTO：intl-tel-input返回的E.164格式标准手机号不会自动同步到原输入框，需要手动将值赋值给th:field绑定的输入框，表单提交时就会自动把值映射到后端registerDto的mobileNumber字段。

修改后的完整JS代码

// Initialize the phone plugin
const phoneInputField = document.querySelector("#tel");
const phoneInput = window.intlTelInput(phoneInputField, {
    utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
});
const info = document.querySelector(".alert-info");
const form = document.querySelector("#login"); // 获取表单元素
function process(event) {
    event.preventDefault();
    // 先验证手机号格式是否合法
    if (!phoneInput.isValidNumber()) {
        info.style.display = "block";
        info.innerHTML = `<strong>请输入合法的国际手机号格式</strong>`;
        return;
    }
    const phoneNumber = phoneInput.getNumber();
    // 将标准格式手机号赋值给th:field绑定的输入框
    phoneInputField.value = phoneNumber;
    // 可选：展示手机号格式提示
    info.style.display = "block";
    info.innerHTML = `Phone number in E.164 format: <strong>${phoneNumber}</strong>`;
    // 手动触发表单提交
    form.submit();
}