javascript - yup 验证模式同步与异步验证并显示一个字段的多个错误

标签 javascript yup

我有两个与 Yup 验证库相关的问题...这些问题是相互关联的。

第一个问题。

有什么方法可以启用验证并返回验证中的所有错误。看例子:

  const petSchema = yup.string().min( 5 ).oneOf( [ 'cat', 'dog' ] );

  petSchema.validate( 'ox', { abortEarly: false } ).catch( ( e ) => {
    console.log( e );
  } );

我预计会收到来自 minoneOf 的错误消息,但我只收到一个错误:this 必须是以下值之一:cat ,狗。这是一个愚蠢的示例,但我有具有不同验证规则的密码表单,并且我想向用户一次性显示这些规则。我想我可以找到它的其他用例...我认为 abortEarly 应该可以工作,但它只是没有按预期工作。

第二个问题:

假设我有 email 字段,我想使用 string().required().email() 模式在前端检查它,并再进行一次 checkin 后端使用异步自定义 test 方法。

问题是,当 requiredemail 失败时,我的异步 test 也会被调用。如果以前的同步验证器失败,有什么方法可以停止调用异步 test 吗?此外,这与第一个问题有关,因为如果我只能显示一个错误并且它在服务器上生成不需要的流量,那么它没有任何意义。

最佳答案

编辑:关于您的验证,在我看来, oneOfmin 不兼容,这对我来说很有意义(如果您正在检查枚举) ,为什么要检查长度?)。使用 minmax 进行测试,您可以从 err.inner 正确得到two ValidationError,如您在 StackBlitz project 中看到的那样

关于多字段验证,在这种情况下仍然有一条消息,但如果您 console.log 错误对象,您将看到一个 errors 属性,该属性是一个包含所有详细错误的数组。

关于顺序验证,不幸的是,根据项目问题的跟踪,这仍然不受支持:https://github.com/jquense/yup/issues/851

关于javascript - yup 验证模式同步与异步验证并显示一个字段的多个错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61478616/

相关文章:

javascript - 在 html5 Canvas 中将图像剪切成不同的形状,如三 Angular 形、五边形?

JavaScript 错误

javascript - 在jointjs中调整单元格的大小

javascript - onmouseover 需要时间来显示图像

javascript - 当子组件触发父组件的状态更改时,如何防止父组件重新渲染

reactjs - 如何从另一个文件导入 yup 模式?

javascript:索引期间在对象上调用了哪些函数?

javascript - 如何使用带有 useFieldArray 的 react-hook-form 对动态表单进行 yup 验证

javascript - 如何在 React Native 中使用 Formik、Yup、Ui Kitten 的复选框和单选按钮

javascript - 是的,使用匹配问题使用正则表达式进行验证