首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何使用Formik验证字段onBlur和其他字段onChange?

若要在React中使用Formik验证字段的onBlur事件和其他字段的onChange事件,你需要遵循以下步骤:

  1. 首先,请确保已经安装并导入Formik库:
代码语言:javascript
复制
npm install formik --save
  1. 导入Formik组件和验证库(例如Yup):
代码语言:javascript
复制
import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';
  1. 创建一个Yup验证模式,用于定义字段的验证规则:
代码语言:javascript
复制
const validationSchema = Yup.object({
  firstName: Yup.string()
    .required('Required')
    .min(2, 'Minimum 2 characters'),
  lastName: Yup.string()
    .required('Required')
    .min(2, 'Minimum 2 characters'),
});
  1. 使用Formik组件创建一个表单,为onChange和onBlur事件添加处理程序:
代码语言:javascript
复制
export const MyForm = () => {
  const handleSubmit = (values, { setSubmitting }) => {
    setTimeout(() => {
      alert(JSON.stringify(values, null, 2));
      setSubmitting(false);
    }, 400);
  };

  return (
    <Formik
      initialValues={{ firstName: '', lastName: '' }}
      validationSchema={validationSchema}
      onSubmit={handleSubmit}
    >
      {({ isSubmitting, errors, touched, handleChange, handleBlur }) => (
        <Form>
          <label htmlFor="firstName">First Name</label>
          <Field
            type="text"
            name="firstName"
            onChange={handleChange}
            onBlur={handleBlur}
            placeholder="First Name"
          />
          <ErrorMessage name="firstName" component="div" />

          <label htmlFor="lastName">Last Name</label>
          <Field
            type="text"
            name="lastName"
            onChange={handleChange}
            onBlur={handleBlur}
            placeholder="Last Name"
          />
          <ErrorMessage name="lastName" component="div" />

          <button type="submit" disabled={isSubmitting}>
            Submit
          </button>
        </Form>
      )}
    </Formik>
  );
};

在上述示例中,我们创建了一个包含两个字段(firstName和lastName)的简单表单。我们使用了Yup验证模式来定义验证规则。接着,我们使用handleChangehandleBlur事件处理程序来处理onChange和onBlur事件。最后,我们使用ErrorMessage组件来显示验证错误信息。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券