我已经按照 yup 上的教程进行操作，并尝试了很多方法来执行此操作，但不理解简单表单验证上的错误。我得到了错误field.resolve is not a function。

这是函数内的代码片段onClick：

const registrationSchema = yup.object().shape({
      username: yup.string().required,
      email: yup.string().email().required,
      password: yup.string().min(0).max(10).required,
    });

    const formData = {
      username: registerUsername,
      email: registerEmail,
      password: registerPassword,
    };

    const answer = registrationSchema.isValid(formData).then(function (valid) {
      console.log("works");
    });

我真的很困惑这是如何以及为什么不起作用。

当尝试使用 Yup 库进行验证时，以下函数中会抛出错误“branch is not a function”（我已注释掉 schema.validate 函数，在这种情况下我的代码可以正常工作，但使用 schema 则无法正常工作）：

const schema = Yup.object({
  boundary: Yup.string().required('Boundary is required'),
  boundaryConstructionDate: Yup.string().when('boundary', {
    is: (value) => value === 'yes',
    then: Yup.string().required('Boundary construction date is required'),
    otherwise: Yup.string(),
  }),
  toilet: Yup.string().required('Toilet is required'),
  toiletConstructionDate: Yup.string().when('toilet', {
    is: (value) => value === 'yes',
    then: Yup.string().required('Toilet construction date is required'),
    otherwise: Yup.string(),
  }),
  payjal: Yup.string().required('Payjal is required'),
  ramp: Yup.string().required('Ramp is required'),
  rampConstructionDate: Yup.string().when('ramp', {
    is: (value) => value === 'yes',
    then: Yup.string().required('Ramp construction date …

该烨 ValidationError对象不具有自定义错误消息。

let data = {
    foo: "aaa"
}

let schema = 
    yup.object().shape({
        foo: yup.number().integer('Custom "must be a number" error message!')
    });

try {

    let validated = await schema.validate(data, { abortEarly: false })

} catch (err) {
    console.log(err.errors[0]) // foo must be a `number` type, but the final value was: `NaN`
    console.log(err.inner[0].message) // foo must be a `number` type, but the final value was: `NaN`
}

我应该Custom "must be a number" error message!在err.inner[0].message.

这是代码和框。 …

TL; 博士

这有效：https : //codesandbox.io/s/stoic-beaver-ucydi

使用 React Hook Form 重构后，这不起作用：https ://codesandbox.io/s/objective-cloud-bkunr?file=/src/ControlledTextField.tsx

很长的故事

没有 React Hook 表单（工作正常）

我最近使用Fluent UI构建了一个有状态的 React 表单，并将字段包装在自定义组件中。

我已经包含了一个功能，当您在站点标题字段中键入时，会生成站点 URL 字段中的值（在我的情况下，它只是复制字段值并删除对 URL 无效的字符）。

（简化的）代码运行良好，如下所示：

import * as React from 'react';
import {useState} from 'react';
import { PrimaryButton } from 'office-ui-fabric-react';
import SiteTitleField from '../../../common/formFields/SiteTitleField';
import SiteUrlField from '../../../common/formFields/SiteUrlField';

export default function MyForm(props) {

  const urlPrefix: string = "https://" + window.location.hostname + "/sites/";

  const [siteTitle, setSiteTitle] = useState();
  const [titleErrorMessage, setTitleErrorMessage] = useState('');

  const [siteUrl, …

我发现当添加了最小/最大值时yup会忽略该字段。nullable

myValue: string().nullable().min(10, "This value must be minimum of 10 characters.")`.

回购协议中存在一个已关闭的问题，但没有给出任何解决方案。

这是预期的行为吗？如果是，是否有任何解决方法？我可以在不使用 yup 的情况下检查值的长度并引发错误，但更愿意将其全部保留在 yup 模式验证中。

我有一个包含复选框的表单，如果是，true则会出现一个新字段。

我希望当该字段可见时，它可以被视为必需的，如果它不可见，则可以将其视为必需的。

这里endComment应该required只有当show是true

你有解决办法吗？

全局代码：

 const Form = {
   const [show, setShow] = useState<boolean>(props.event.endDate ? true : false);
   const addEndComment = (value: boolean) => {
     setShow(value);
   };

const schema = yup.object().shape({
    comment: yup.string().required(),
    endComment: yup.string().required(),
});

    return (
        <>
            <Formik
                enableReinitialize
                initialValues={{
                    comment: props.event.comment,
                    endComment: props.event.endComment,
                }}
                onSubmit={(values) => {
                  ....
                }}
                validationSchema={schema}
            >
                {(formikProps) => (
                    <form onSubmit={formikProps.handleSubmit}>
                        <section>
                            <p>
                                <I18nWrapper
                                    translateKey={'event.form-create-event.explanations'}
                                />
                            </p>
                        </section>
                        <section>
                            <Form.Group controlId="eventComment">
                                <Form.Label>
                                    <I18nWrapper …