如何在Formik中同时实现表单提交验证与字段级验证？

你可以通过手动调用Formik的validateField方法来实现字段变更时仅验证当前字段，同时保留提交时的全字段验证逻辑，具体修改方式如下：

核心思路 #

保持validateOnChange={false}避免全局字段变更时的全量验证，同时在目标字段的onChange事件中，先完成字段值的更新，再手动触发当前字段的单独验证。

修改后的完整代码 #

return (
  <div className='add-member'>
    <h1>Register a new member</h1>
    <Formik
      validationSchema={validationSchema}
      validateOnBlur={false}
      validateOnChange={false} // 保持关闭全局字段变更验证
      initialValues={{ name: ''}}
      onSubmit={() => {
        console.log('something')
      }}
    >
      {/* 从Formik的render props中获取需要的方法 */}
      {({errors, validateField, handleChange}) => (
        <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' : ''}
                {/* 自定义onChange逻辑：先更新字段值，再验证当前字段 */}
                onChange={(e) => {
                  handleChange(e);
                  validateField('name');
                }}
              />
            </div>
          </div>
          {/* 补充提交按钮，确保表单可提交 */}
          <button type="submit">Submit</button>
        </Form>
      )}
    </Formik>
  </div>
)

逻辑说明 #

• 关闭validateOnChange后，Formik不会在任意字段变更时自动验证所有字段
• handleChange维持Formik默认的字段值更新逻辑，保证表单状态正常同步
• validateField('name')仅针对当前字段触发验证，只会更新该字段对应的errors状态
• 提交表单时，Formik会自动通过配置的validationSchema验证所有字段，满足提交时全量验证的需求

内容的提问来源于stack exchange，提问作者user23367986