Question

这有点奇怪的行为，但我实际上无法弄清楚我的验证会发生什么:)

我有一个字段级别验证

export const confirm = (valueToConfirm, message) => (value, allValues) => {
  if (value !== allValues[valueToConfirm]) {
    return message;
  }

  return undefined;
};

和它一样使用

<Field
  type="email"
  name="confirmEmail"
  component={TextInput}
  validate={[required, email, confirm('email', 'Bla-bla-bla')]}
/>

这实际上只有在其他验证失败的情况下才有效。因此，如果用户输入更正了所有字段，并且只是确认电子邮件与电子邮件不匹配，则将不会出现任何验证错误！

但是如果我改变验证，那么它就不会是函数返回函数 - 它可以工作。

export const confirmEmail = (value, allValues) => {
  if (!value || value !== allValues.email) {
    return 'Bla-bla-bla';
  }

  return undefined;
};

P.S。所有字段级验证都相同，例如动态minLength验证。

Answer 1

我知道你正在使用Redux Field，但使用Vanilla React也很容易实现。

<form>
 <input
                type="text"
                name="username"
                placeholder="name"
                value={this.state.username}
                onChange={this.handleChange}/>
</form>

 handleChange(e) {
   //check for validation here to have real time feedback to user when their 
   inputs match what you're looking for. 

 }

Answer 2

看起来confirm验证功能不正确。您正在使用的验证功能：

export const confirm = (valueToConfirm, message) => (value, allValues) => {
  if (value !== allValues[valueToConfirm]) {
    return message;
  }

  return undefined;
};

使用您正在使用的参数：

confirm('email', 'Bla-bla-bla')

表示始终验证。您正在根据email中email属性的值验证allValues输入的值，这是email输入的值。那就是：

// value = test@example.com
// allValues = {email: 'test@example.com'}
// valueToConfirm = 'email'
// message = 'Bla bla bla'

if (value !== allValues[valueToConfirm]) {
  return 'Bla bla bla';
}

评估为：

if (test@example.com !== test@example.com) {
  return 'Bla bla bla';
}

此条件将始终失败，这意味着验证将通过。

函数返回函数不适用于redux表单字段级验证。

2 个答案: