React Formik - 仅在表单提交时触发验证

JS

使用React Formik可以轻松地为表单添加验证功能。默认情况下，Formik会在表单中的每个字段更改时自动触发验证。但是，有时我们希望只在表单提交时验证所有字段。那么，如何实现这一点呢？让我们来看看。

在Formik中，我们可以通过使用validateOnChange={false}属性来禁用字段更改时的自动验证。这样一来，表单字段的更改将不会立即触发验证。相反，我们需要通过调用Formik的validateForm方法来手动触发验证。

下面是一个简单的例子，展示了如何在表单提交时触发验证：

JSx
import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
const initialValues = {
  name: '',
  emAIl: '',
  password: ''
};
const validate = (values) => {
  const errors = {};
  if (!values.name) {
    errors.name = '姓名是必填项';
  }
  if (!values.emAIl) {
    errors.emAIl = '邮箱是必填项';
  } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.emAIl)) {
    errors.emAIl = '无效的邮箱地址';
  }
  if (!values.password) {
    errors.password = '密码是必填项';
  } else if (values.password.length < 6) {</p>    errors.password = '密码长度至少为6个字符';
  }
  return errors;
};
const App = () => {
  const handleSubmit = (values, { setSubmitting }) => {
    setTimeout(() => {
      alert(JSON.stringify(values, null, 2));
      setSubmitting(false);
    }, 500);
  };
  return (
    <div>
      <h1>注册表单</h1>
      <Formik</p>        initialValues={initialValues}
        validateOnChange={false} // 禁用字段更改时的自动验证
        validate={validate}
        onSubmit={handleSubmit}
      >
        <Form>
          <div>
            <label htmlFor="name">姓名：</label>
            <Field type="text" name="name" />
            <ErrorMessage name="name" component="div" />
          </div>
          <div>
            <label htmlFor="emAIl">邮箱：</label>
            <Field type="emAIl" name="emAIl" />
            <ErrorMessage name="emAIl" component="div" />
          </div>
          <div>
            <label htmlFor="password">密码：</label>
            <Field type="password" name="password" />
            <ErrorMessage name="password" component="div" />
          </div>
          <button type="submit">提交</button>
        </Form>
      </Formik>
    </div>
  );
};
export default App;

在上面的例子中，我们定义了一个简单的注册表单，包含姓名、邮箱和密码字段。我们使用Formik组件包裹表单，并通过validateOnChange={false}属性禁用了字段更改时的自动验证。

在表单提交时，调用handleSubmit函数。在这个函数中，我们可以执行一些异步操作，比如向服务器发送表单数据。在这个例子中，我们使用setTimeout函数模拟了一个异步操作，并在500毫秒后弹出一个对话框显示表单数据。

通过上述代码，我们可以实现仅在表单提交时触发验证的功能。这样一来，用户在填写表单时不会看到实时的验证错误提示，只有在他们尝试提交表单时才会看到。这种方式可以提高用户体验，同时减少不必要的验证请求。