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

问题描述 投票:5回答:2

我有一个注册表,其中包括:

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

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

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

我正在尝试使用字段级验证: 字段级验证

我还从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]}
 />

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

redux-form
2个回答
14
投票

找到了解决方案:

使用allValues:

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

1
投票

要添加到@DM的答案, valueallValues args不会从父组件传递到此验证函数 。 这是一个完整的例子:

<Field />组件:

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

passwordsMustMatch验证:

export const passwordsMustMatch = (value, allValues) => 
  value !== allValues.password ? 
    'Passwords do not match' :
     undefined
© www.soinside.com 2019 - 2024. All rights reserved.