多个验证函数被视为 OR 而不是 AND

Question

我正在尝试遵循官方网站上的字段级验证示例。

这是我用来呈现字段的 renderInput 函数。

const renderInput = ({
  input,
  label,
  type,
  meta
}) => (
  <React.Fragment>
    <input
      {...input}
      type={type}
    />
    <pre>{JSON.stringify({meta}, null, 4)}</pre>
  </React.Fragment>
)

我是这样称呼它的：

<Field
  name="title"
  component={renderInput}
  validate={[required, minLength(10)]}
  type="text"
/>

这些是我的验证函数：

const required = value => {
  console.log('required', !!(value && value.length > 0) ? undefined : 'Mandatory')
  return !!(value && value.length > 0) ? undefined : 'Mandatory';
};

const minLength = min => value => {
  console.log(`minLength(${min})`, !!(value && value.length < min) ? `More than ${min} characters please` : undefined);
  return !!(value && value.length < min) ? `More than ${min} characters please` : undefined;
}

我正在输入 test，其中：

if (required('test') && minLength(10)) // false

发生的事情是

if (required('test') || minLength(10)) // true

...因为其中1个为真，验证通过。

如果其中一个元素为假，validate 数组不应该为假吗？

还是我看错了？

Answer 1

从他们的示例来看，validate 数组中的每个传入函数似乎只是运行顺序而第一个不是 return undefined （如果有）将为该字段定义 meta.error。

Answer 2

当您按照他们在文档中所做的操作时会发生什么 - 将 const minLength10 = minLength(10) 放入数组中。

多个验证函数被视为 OR 而不是 AND

Multiple validate functions are treated as OR and not as AND

javascript

reactjs

redux-form