Redux-Form注册表单密码确认字段匹配验证实现方法问询

嗨，这事儿不难！你想用字段级验证+formValueSelector的思路完全可行，我给你拆解成具体步骤，附上代码示例：

1. 导入依赖并创建表单值选择器 #

首先确保你已经导入redux-form的相关工具，然后针对你的register表单创建选择器，用来获取密码字段的实时值：

import { reduxForm, formValueSelector } from 'redux-form';

// 针对你的注册表单创建选择器
const passwordSelector = formValueSelector('register');

2. 通过mapStateToProps获取密码值到组件props #

把密码字段的值映射到组件的props里，这样验证函数就能拿到它：

const mapStateToProps = (state) => ({
  // 从Redux store中获取password字段的当前值
  currentPassword: passwordSelector(state, 'password')
});

3. 编写字段级验证函数 #

专门给confirmPassword字段写验证逻辑，判断输入值和密码是否匹配：

const validateConfirmPassword = (value, props) => {
  // 先判断确认密码是否为空（可选，根据你的需求调整）
  if (!value) {
    return 'Please confirm your password';
  }
  // 对比确认密码和密码字段的值
  if (value !== props.currentPassword) {
    return "Passwords don't match";
  }
  // 验证通过时返回undefined
  return undefined;
};

4. 在Confirm Password字段上绑定验证 #

把这个验证函数绑定到你的confirmPassword字段上，同时处理错误消息的展示：

<Field
  name="confirmPassword"
  type="password"
  component={({ input, label, meta: { touched, error } }) => (
    <div>
      <label>{label}</label>
      <input {...input} placeholder={label} />
      {/* 当字段被用户触碰过且存在错误时，显示错误消息 */}
      {touched && error && <span className="error-message">{error}</span>}
    </div>
  )}
  label="Confirm Password"
  validate={[validateConfirmPassword]} // 绑定验证函数
/>

5. 最后用高阶组件包装组件 #

确保你的组件被reduxForm高阶组件包装，并且和之前的表单名保持一致：

export default reduxForm({
  form: 'register' // 和选择器里的表单名完全一致
})(connect(mapStateToProps)(YourRegisterComponent));

这样一来，当用户修改密码字段或者确认密码字段时，验证逻辑会自动触发——只要两个密码不匹配，确认密码字段下方就会显示你要的“Passwords don't match”错误消息啦！

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