标签: yup

如何实现像 1 个字段的值应该总是大于另一个字段的值这样的条件。

这是我的架构

   value: Yup.number().required(''),
   value2: Yup.number().when('value',{
     is: (val) => something here
    then: Yup.number().required('Required').positive('value should be positive'),
    otherwise: Yup.number()
  })

我想检查 value2 是否总是 > value。如何在 when 条件下访问 value2 的值？

我有一个标志为布尔值的对象，另一个项目为对象数组。

只有当标志为真时，我才想检查对象数组。

所以：

{
  shouldCheck: false
}

这应该通过

{
  shouldCheck: true
}

这应该打破

{
  shouldCheck: true,
  rules: []
}

这应该打破

{
  shouldCheck: true,
  rules: [1]
}

这应该打破

{
  shouldCheck: true,
  rules: [{other: 'xx'}]
}

这应该打破

{
  shouldCheck: true,
  rules: [right: 'one']
}

这应该通过

是的架构：

const delaySchema = yup.object().shape({
  shouldCheck: yup.boolean(),
  rules: yup.mixed()
    .when(['shouldCheck'], {
      is: (sck) => {
        return sck;
      },
    then: yup.array().of(yup.object().shape({
      right: yup.string().required(),
    })),
    otherwise: yup.mixed().nullable()
  }),
});

现在这里的问题是它忽略了内部值并且不检查它们。

我尝试将formik与自动生成的表单一起使用。但是当有复选框时，我会收到警告：

警告：组件正在更改要控制的复选框类型的不受控制的输入。输入元素不应从不受控制切换到受控制（反之亦然）。

触摸它们时。对于其他字段，可以使用 formilk 成分的初始值来解决。但是复选框不应该有初始值。如何修复？

我创建了一些registrationSchema

 export const registrationSchema = (translate) => Yup.object().shape({
  //... other properties that are validated.
  //       for example username
    username: Yup.string()
    .min(6, translate('validation:common.username.min', { min: 6 }))
    .max(20, translate('validation:common.username.max', { max: 20 }))
    .required(translate('validation:common.username.required')),
     DOB: Yup.lazy(value => {
        console.log('yup', value);
        if (moment().diff(moment(value), 'years') < 18)
          // Here return DOB error somehow
      })
    ...

到目前为止，它的工作原理就像是一种魅力。但是现在我需要验证用户是否年满18岁。我从日期选择器中获取DateOfBirth，并且可以随时检查它是否小于18。

if(moment().diff(moment(date),'years) < 18)

这个日期值是我在使用Yup.lazy时获得的，但是如果在18年以下才能在DOB字段中显示它，则不知道如何抛出验证错误。我什至不知道我是否使用正确的yup方法。我想使用yup.date（）。但是如何在架构中获取选择日期以检查其有效年龄。

我正在使用react-selectwithFormik和Yup来验证我的表单，但由于某种原因我的验证不起作用。我的架构如下所示：

const Schema = Yup.object().shape({
age: Yup.object().shape({
    label: Yup.string().required("Required"),
    value: Yup.string().required("Required")
})
});

我的数据如下所示：

export const ageOptions = [
  { value: 0.1, label: "Not born yet" },
  { value: 0.3, label: "Baby - 0 to 3 months" },
  { value: 0.6, label: "Baby - 3 to 6 months" },
  { value: 0.12, label: "Baby - 6 to 12 months" },
  { value: 0.18, label: "Baby - 12 to 18 months" },
  { value: 0.24, …

以收集个人详细信息的 HTML 表单为例。

注意：代码片段经过简化，与屏幕截图不完全匹配。此外，代码片段是使用 Yup 编写的，这是一个与 Joi 非常相似的库，面向浏览器而不是 NodeJS。

为了提交表单，我想对地址字段进行验证并使它们成为必需，但前提是用户已部分填写了地址部分。总的来说，我想让地址详细信息可选。

这是我的 PersonSchema 的简化版本...

import { object, string, number } from 'yup'

const PersonSchema = object().shape({
  name: string().required(),
  age: number()
    .positive()
    .integer()
    .required(),
  address: AddressSchema
})

以这种方式定义 AddressSchema 不起作用，因为这些字段始终是必需的...

const AddressSchema = object().shape({
  street: string()
    .min(2, 'Too Short!')
    .max(50, 'Too Long!')
    .required(),
  city: string()
    .min(2, 'Too Short!')
    .max(50, 'Too Long!')
    .required(),
  state: string()
    .min(2, 'Too Short!')
    .max(50, 'Too Long!')
    .required()
})

这是我尝试使地址字段依赖于其他地址字段的存在，但这不起作用，因为您遇到循环依赖问题......

const AddressSchema = object().shape({
  street: string()
    .when(['city', 'state'], { …

我有一个密码重置表单，其中对新密码的验证是这样的，它应该与正则表达式匹配并且不应该与用户的 userId 匹配。userId 检查必须不区分大小写。

我尝试了小写方法，但随后正则表达式验证失败，因为在验证开始之前该值已转换为小写。

  newPassword: yup
        .string()
        .notOneOf(
          [yup.ref("oldPassword")],
          "New password must be different than current password."
        )
        .matches(REGEX_PASSWORD, "Password does not meet requirements.")
        .lowercase()
        .notOneOf(
          [userId.toLowerCase()],
          "New password must not be same as userId"
        )

是否有任何方法可用于转换仅用于 userId 检查的值，以便我可以执行不区分大小写的检查而不必担心正则表达式失败。

我与使用反应表单验证工作Yup，沿Formik。react-select表单中的一个元素也需要验证。为了验证我正在做使用validationSchema的Formik，以验证形式值的变化。我只需要选择字段的值作为字符串，所以不能采用完整的对象（键值）。选择字段运行良好，但是没有清除验证错误消息。问题是如何使用现有方法验证选择字段？

以下是最少的代码示例。

import ReactDOM from "react-dom";
import React, { useState } from "react";
import { Grid, TextField, Button } from "@material-ui/core";
import { Formik } from "formik";
import * as Yup from "yup";
import Select from "react-select";
import "./styles.css";

function App() {
  const [selectedYear, setSelectedYear] = useState("");

  const testSchema = Yup.object().shape({
    name: Yup.string().required("Enter Name"),
    year: Yup.string().required("Select Year")
  });

  const initialValues = {
    name: "",
    year: ""
  };

  const handleYearChange = …

我正在使用 Yup 的.test()方法在 Formik 中尝试异步验证，并且需要设置我从 API 获得的错误消息。根据后端的某些条件，错误消息会有所不同。

尝试了这里提到的几个解决方案
https://github.com/jquense/yup/issues/222和使用 Yup 和 Typescript 的动态验证消息

但是是的，抛出了test().

文档说

所有测试都必须提供名称、错误消息和必须返回 true 或 false 或 ValidationError 的验证函数。使测试异步返回一个可解决 true 或 false 或 ValidationError 的承诺。

我正在解决带有错误消息的新 ValidationError 但它仍然会引发默认错误。

这是代码。

const schema = Yup.object().shape({
  email: Yup.string().test(
    "email_async_validation",
    "Email Validation Error", // YUP always throws this error
    value => {
      return new Promise((resolve, reject) => {
        emailValidationApi(value)
          .then(res => {
            const { message } = res.data; // I want this error message to …

我有以下作为 Formik 的表单字段类型：

interface FormFields {
  groups: string[];
}

我正在尝试传递一个 Yup 模式来验证上述内容：它可以是一个空数组（必须定义）但也可以包含字符串。

以下不起作用：

const schema = Yup.object({
  groups: Yup.array().defined()
}).defined();

我哪里错了？