验证两个密码字段Redux-Form的匹配

Question

我有一份注册表格，其中包括：

• 用户名
• 密码
• 密码验证

用户必须在这两个字段中输入相同的密码，否则密码验证下方会显示错误消息：“密码不匹配”

我正在使用Redux-Form，并围绕如何创建此验证。

我正在尝试使用字段级验证：field level verification

我也从redux获取密码值：

const selector = formValueSelector('register');
const mapStateToProps = state => {
  return {
    password: selector(state, 'Password')
  };
};

所以，我写了以下验证函数：

  const matchPasswords = pass1 =>pass2 => 
  pass1  !== pass2 ? 'Passwords don't match' : undefined;

我将其传递给验证字段，如下所示：

 <Field
   name="username"
   type="text"
   component={renderField}
   label="Username"
   validate={[matchPasswords(this.props.password]}
 />

但它不起作用。 有什么建议吗？

Answer 1

找到解决方案：

使用allValues：

const passwordsMatch = (value, allValues) => 
  value !== allValues.password ? 'Passwords don't match' : undefined;

Answer 2

要添加到@DM的答案中，value和allValues args不会从父组件传递到此验证功能。这是一个完整的示例：

<Field />组件：

...
<Field
  type="password"
  name="passwordConfirmation"
  validate={[required, passwordsMustMatch]} 
/>

passwordsMustMatch验证：

export const passwordsMustMatch = (value, allValues) => 
  value !== allValues.password ? 
    'Passwords do not match' :
     undefined