React表单与Redux Form密码确认验证实现求助

嗨，我来帮你搞定这个密码确认校验的问题！你的必填校验逻辑是对的，只需要在现有基础上加上密码匹配的判断就行，我给你调整后的代码：

const validate = values => { 
  const errors = {}; 
  // 先处理所有必填字段的校验
  if (!values.username) { errors.username = 'Required'; } 
  if (!values.password) { errors.password = 'Required'; } 
  if (!values.confirmpassword ) { errors.confirmpassword = 'Required' ; } 

  // 当密码和确认密码都已填写时，检查是否匹配
  if (values.password && values.confirmpassword) {
    if (values.password !== values.confirmpassword) {
      errors.confirmpassword = 'Passwords do not match';
    }
  }

  return errors; 
}; 
export default validate;

为什么之前的尝试没生效？ #

大概率是你没有先判断两个字段是否都存在就直接做了比较——比如如果用户还没输入密码，values.password是undefined，这时候和confirmpassword比较会出现异常，或者错误提示时机不对。

几个优化细节： #

• 先做必填校验，再做匹配校验：这样用户会先收到「必填」提示，再收到「不匹配」提示，操作体验更顺畅
• 把错误信息挂在confirmpassword字段上：错误提示会精准显示在确认密码输入框下方，符合用户的操作直觉
• 双重判断确保两个字段都有值：避免空值比较导致的意外问题

现在你可以试试这个代码，密码不匹配的提示应该就能正常显示啦！

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