标签: yup

下面是我使用的React表单验证代码formik。默认情况下，当表单加载时，我想禁用提交按钮：

import { useFormik } from "formik";
import * as Yup from "yup";

const formik = useFormik({
    initialValues: {
      firstName: "",
      lastName: "",
      email: ""
    },
    validationSchema: Yup.object({
      firstName: Yup.string()
        .max(15, "Must be 15 characters or less")
        .min(3, "Must be at least 3 characters")
        .required("Required"),
      lastName: Yup.string()
        .min(3, "Must be at least 3 characters")
        .max(20, "Must be 20 characters or less")
        .required("Required"),
      email: Yup.string()
        .email("Invalid email address")
        .required("Required")
    }),
    onSubmit: values => {
      handleSubmit(values);
    }
  }); …

import * as Yup from 'yup';
import User from '../models/User';

class UserController {
async store(req, res) {
const schema = Yup.object().shape({
  name: Yup.string().required(),
  email: Yup.string()
    .email()
    .required(),
  password: Yup.string()
    .required()
    .min(6),
});

if (!(await schema.isValid(req.body))) {
  return res.status(400).json({ error: 'Validation fails' });
}

const userExists = await User.findOne({ where: { email: req.body.email } });
if (userExists) {
  return res.status(400).json({ error: 'User already exists.' });
}
const { id, name, email, provider } = await User.create(req.body);
return res.json({ id, name, email, …

我想用 formik 和validationschema 进行异步验证，但我找不到示例或演示。

我有一个电子邮件字段,只有在选中复选框时才显示(布尔值为true).当表单被提交时,如果选中该复选框,我只需要该字段(boolean为true).

这是我到目前为止所尝试的:

    const validationSchema = yup.object().shape({
       email: yup
             .string()
             .email()
             .label('Email')
             .when('showEmail', {
                 is: true,
                 then: yup.string().required('Must enter email address'),
             }),
        })

我尝试过其他几种变体,但是我从Formik和Yup那里得到错误:

Uncaught (in promise) TypeError: Cannot read property 'length' of undefined at yupToFormErrors (formik.es6.js:6198) at formik.es6.js:5933 at <anonymous> yupToFormErrors @ formik.es6.js:6198

我也从Yup那里得到验证错误.我究竟做错了什么？

我正在使用react-hook-form渲染自定义组件Controller。

如果使用时出现错误register，焦点正常，但Controller不正常。

当自定义组件仅处理单个输入时，我能够找到一种处理错误的方法，但当它有多个输入时，我找不到处理错误的方法。

表单.js

import { Controller, useForm } from "react-hook-form";\nimport CustomInput from "./CustomInput";\nimport * as yup from "yup";\n\nconst schema = yup.object({\n  name: yup.object().shape({\n    first: yup.string().required(),\n    last: yup.string().required(),\n  }),\n});\nfunction Form() {\n  const {\n    handleSubmit,\n    control,\n    formState: { errors },\n  } = useForm({\n    defaultValues: { name: { first: "", last: "" } },\n    resolver: yupResolver(schema),\n  });\n\n  const onSubmit = (data) => console.log(data);\n\n  return (\n    <form onSubmit={handleSubmit(onSubmit)}>\n      <Controller\n        name="name"\n        control={control}\n        rules={{ required: true }}\n …

我正在尝试为表单字段/选择实现一个非常基本的验证。验证架构：

vehicleProvider: Yup.object() // This is an object which is null by default
    .required('formvalidation.required.message')
    .nullable(), 
reserveVehicle: Yup.number().when('vehicleProvider', { // This is a number which is null by default
    is: provider => provider?.hasReserve,
    then: Yup.number()
        .required('formvalidation.required.message')
        .nullable(),
    otherwise: Yup.number().notRequired()
}),

我想要做的是：只需要/验证reserveVehicle如果provider.hasReserve是true。否则，不需要号码。我收到此错误：

“reserveVehicle 必须是一种number类型，但最终值是：（NaN从值中转换NaN）。”

这是有道理的（有点）因为，null这不是一个数字。但是当我试图告诉它不应该要求它时，在我看来它不应该尝试评估它。

我是否错过了任何关键概念Yup？

我有一个使用 Formik 库创建事件的表单。我需要检查开始日期是否与结束日期重叠，反之亦然。我有两个日期选择器可以选择日期和时间。我如何使用 Yup 来验证这一点并在它们重叠时显示错误消息？

我在这里先向您的帮助表示感谢

const validationSchema = Yup.object().shape({
    eventName: Yup.string()
        .min(1, "Must have a character")
        .max(10, "Must be shorter than 255")
        .required("Must enter an event name"),

    email: Yup.string()
        .email("Must be a valid email address")
        .max(255, "Must be shorter than 255")
        .required("Must enter an email"),

    eventStartDate: Yup.date()
        .required("Must enter start date"),


    eventEndDate: Yup.date()
        .required("Must enter end date")


})

var defaultValue = new Date().toDateString


export default function EventForm(){

    return (
        <Formik 
        initialValues={{eventName: "", email: "", }}
        validationSchema={validationSchema}
        onSubmit={(values, {setSubmitting, resetForm}) …

我的表单上有一个 MUIRadioGroup（选项 = 低、中和高）和一个多选 MUIAutocomplete 组件。

<MUIRadioGroup
              name="requestDetail.riskAssesmentDetail.riskClassification"
              label="Risk Classification"
              variant="outlined"
              size="small"
              defaultValue
            />

<MUIAutocomplete
                  name="requestDetail.riskAssesmentDetail.safetyDetail.investigationType"
                  label="Type of Investigation"
                  variant="outlined"
                  size="small"
                  multiple
                  disableCloseOnSelect
                  options={API_Safety_InvestigationType}
                />

我的架构是...

requestDetail: yup.object().shape({ ...
    riskAssesmentDetail: yup.object().shape({
      riskClassification: yup
        .string()
        .label("Risk Classification")
        .required()
        .typeError("Invalid Selection"),
      safetyDetail: yup
        .object()
        .shape()
        .when("riskClassification", {
          is: (riskClassification) =>
            ["Medium", "High"].includes(riskClassification),
          then: yup.object({
            investigationType: yup
              .array()
              .label("Type of Investigation")
              .min(1),
          }),
        }),
    }),

当单选按钮为“中”或“高”时，我需要对 MUIAutocomplete 组件执行验证。

我收到错误...

Uncaught (in promise) TypeError: branch is not a function
    at Condition.fn (index.esm.js:175:1)
    at Condition.resolve …

我是React的新手,并且正在尝试使用yup进行验证.我目前收到以下错误:

TypeError:无法读取未定义的属性"对象"

使用此代码:

validationSchema: Yup.object().shape({
  firstName: Yup.string().required()
}),

我正在使用所有最新版本的formik,react和yup.版本是

"是":"^ 0.25.1""formik":"^ 0.11.11","反应":"^ 16.4.0","react-dom":"^ 16.4.0",

有人可以帮我解决这个问题吗？

它在这里复制 https://codesandbox.io/s/lrowpj8pq7

谢谢!

所以我使用Yup进行了以下验证：

const myValidtion = yup
.string()
.trim()
.matches(/[abcdefghijklmnopqrstuvwxyz]+/ , 'Is not in correct format')
.required();

所以有了这个，这将通过：hello world正如预期的那样。但让我感到困惑的是为什么这也会通过：hello WORLD或者这也会通过：hello ,&$#$ world

另一方面，如果我们只输入这样的无效字符，*%$&#$($#就不会通过并向我显示错误。正如我所看到的，如果所有条目都无效，这只会给我错误。

我正在寻找的是如何使用 Yup 匹配方法在用户输入时不通过，例如： hello ,*&) world

谁能帮我这个？