0

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

我有一个字段级验证

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')]}
/>

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

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

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

  return undefined;
};

PS 对于所有字段级验证都相同，例如动态minLength验证。

4

2 回答 2

0

我知道您正在使用 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. 

 }
于 2017-12-16T18:44:08.907 回答
0

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

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

  return undefined;
};

使用您正在使用的参数：

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

意味着它将始终验证。您正在根据中的属性值验证email输入的值，该值是输入的值。那是：emailallValuesemail

// 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';
}

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

于 2017-12-16T21:38:42.363 回答