ReactJS+Spring Boot注册表单密码与确认密码一致性校验问题求助

解决方案 #

无需修改后端Java实体类的校验规则，只需要在前端提交逻辑中增加拦截判断即可解决问题，具体修改如下：

1. 表单提交逻辑新增校验拦截 #

你当前虽然做了密码一致性的实时提示，但提交时没有做拦截判断，只需要在handleSubmit函数最开头增加校验逻辑，密码不匹配时直接终止请求发起即可：

// submit form data
const handleSubmit = (e) => {
    e.preventDefault();
    // 新增：密码一致性校验，不匹配则直接终止后续逻辑
    if(customer.password !== customer.confirmPassword) {
        setPasswordError("两次输入的密码不一致");
        return;
    }
    // 后续原有逻辑保持不变
    const formData = new FormData(e.target);
    console.log("Age: " + calculateAge(customer.dateOfBirth));
    // ... 原有fetch提交代码不需要修改
}

2. 可选体验优化：提交按钮动态禁用 #

可以在密码不匹配时直接禁用提交按钮，避免用户误操作：

<button 
    type="submit" 
    className="shadow-none btn register-btn"
    // 新增禁用逻辑：密码不一致/密码长度不足时按钮不可点击
    disabled={customer.password !== customer.confirmPassword || customer.password.length < 8}
>
    创建账号
</button>

如果需要保持原有英文提示，把上述代码里的两次输入的密码不一致换回Passwords don't match即可。

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