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

...因为其中一个是真的，验证正在通过。

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

或者我看到了这个错误？

Answer 1

从他们的示例中，似乎validate数组中的每个传入函数都是按顺序运行的，而第一个不返回undefined（如果有）的函数将定义{{1对于那个领域。

Answer 2

当您在文档中执行操作时会发生什么 - 将const minLength10 = minLength(10)放入数组中。

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

2 个答案: