时间戳

首页 > 解决方案 > 多个验证函数被视为 OR 而不是 AND

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

问题描述

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

这是我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如果其中一个元素为假，数组不应该为假吗？

还是我看错了？

标签： javascriptreactjsredux-form

解决方案

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

推荐阅读