formik中如何同时进行提交和字段验证？

Question

我想使用formik在提交时验证表单，同时也进行字段级别验证。例如，提交时验证所有字段，并在更改时验证字段。

 return (
    <div className='add-member'>
      <h1>Register a new member</h1>
      <Formik
        validationSchema={validationSchema}
        validateOnBlur={false}
        validateOnChange={false}
        initialValues={{ name: ''}}
        onSubmit={() => {
          console.log('something')
        }}
      >
        {({errors}) => (
          <Form>
            <div className='member-info'>
              <div className='title'><p>Info</p></div>
        
              <div className='input' id='name-input'>
                <label>Name</label>
                <Field name='name' placeholder={errors.name ? '*Required' : null} className={errors.name ?      'input-error' : ''} />
              </div>
      </Formik>
    </div>
  )
 

我在 Formik 组件中禁用了 validateOnChange，以便提交验证有效，但不知道如何验证更改时的字段。

Answer 1

嗯，您可以尝试使用 Yup 和validationSchema 进行表单验证。 而且你应该使用

useFormik

钩子而不是

Formik

组件。

然后你可能会得到正确的答案。

例如

const formik = useFormik({
    initialValues,
    validationSchema: registrationSchema,
... the code that you want

const registrationSchema = Yup.object().shape({
fieldName: Yup.string()
.oneOf([Yup.ref('')], "example commit"),

也许，你会成功。