验证

Formik 旨在轻松管理具有复杂验证的表单。Formik 支持同步和异步的表单级和字段级验证。此外，它还内置支持通过 Yup 进行基于模式的表单级验证。本指南将介绍上述所有内容的来龙去脉。

验证类型

表单级验证

表单级验证很有用，因为无论何时运行该函数，您都可以完全访问表单的所有 values 和 props，因此您可以同时验证依赖字段。

Formik 有两种方法可以进行表单级验证

<Formik validate> 和 withFormik({ validate: ... })
<Formik validationSchema> 和 withFormik({ validationSchema: ... })

`validate`

<Formik> 和 withFormik() 接受一个名为 validate 的 prop/选项，该选项接受同步或异步函数。

1 // Synchronous validation
2 const validate = (values, props /* only available when using withFormik */) => {
3   const errors = {};
4 
5   if (!values.email) {
6     errors.email = 'Required';
7   } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
8     errors.email = 'Invalid email address';
9   }
10 
11   //...
12 
13   return errors;
14 };
15 
16 // Async Validation
17 const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
18 
19 const validate = (values, props /* only available when using withFormik */) => {
20   return sleep(2000).then(() => {
21     const errors = {};
22     if (['admin', 'null', 'god'].includes(values.username)) {
23       errors.username = 'Nice try';
24     }
25     // ...
26     return errors;
27   });
28 };

有关 <Formik validate> 的更多信息，请参阅 API 参考。

`validationSchema`

如上所示，验证由您自己决定。您可以随意编写自己的验证器或使用第三方库。在 Palmer 集团，我们使用 Yup 进行对象模式验证。它具有与 Joi 和 React PropTypes 非常相似的 API，但体积足够小，可以在浏览器中使用，并且速度足够快，可以在运行时使用。因为我们非常喜欢 Yup，所以 Formik 有一个特殊的配置选项/prop 用于 Yup 对象模式，称为 validationSchema，它会自动将 Yup 的验证错误转换为一个漂亮的对象，其键与 values 和 touched 匹配。这种对称性使管理错误消息周围的业务逻辑变得容易。

要将 Yup 添加到您的项目中，请从 NPM 安装它。

 npm install yup --save

1 import React from 'react';
2 import { Formik, Form, Field } from 'formik';
3 import * as Yup from 'yup';
4 
5 const SignupSchema = Yup.object().shape({
6   firstName: Yup.string()
7     .min(2, 'Too Short!')
8     .max(50, 'Too Long!')
9     .required('Required'),
10   lastName: Yup.string()
11     .min(2, 'Too Short!')
12     .max(50, 'Too Long!')
13     .required('Required'),
14   email: Yup.string().email('Invalid email').required('Required'),
15 });
16 
17 export const ValidationSchemaExample = () => (
18   <div>
19     <h1>Signup</h1>
20     <Formik
21       initialValues={{
22         firstName: '',
23         lastName: '',
24         email: '',
25       }}
26       validationSchema={SignupSchema}
27       onSubmit={values => {
28         // same shape as initial values
29         console.log(values);
30       }}
31     >
32       {({ errors, touched }) => (
33         <Form>
34           <Field name="firstName" />
35           {errors.firstName && touched.firstName ? (
36             <div>{errors.firstName}</div>
37           ) : null}
38           <Field name="lastName" />
39           {errors.lastName && touched.lastName ? (
40             <div>{errors.lastName}</div>
41           ) : null}
42           <Field name="email" type="email" />
43           {errors.email && touched.email ? <div>{errors.email}</div> : null}
44           <button type="submit">Submit</button>
45         </Form>
46       )}
47     </Formik>
48   </div>
49 );

有关 <Formik validationSchema> 的更多信息，请参阅 API 参考。

字段级验证

`validate`

Formik 通过 <Field>/<FastField> 组件或 useField 钩子的 validate prop 支持字段级验证。此函数可以是同步的或异步的（返回 Promise）。默认情况下，它将在任何 onChange 和 onBlur 之后运行。此行为可以在顶级 <Formik/> 组件中分别使用 validateOnChange 和 validateOnBlur props 进行更改。除了更改/失焦之外，所有字段级验证都将在提交尝试开始时运行，然后结果与任何顶级验证结果深度合并。

注意：<Field>/<FastField> 组件的 validate 函数仅在已挂载的字段上执行。也就是说，如果您的任何字段在表单流程期间卸载（例如，Material-UI 的 <Tabs> 卸载了用户所在的先前 <Tab>），则这些字段在表单验证/提交期间不会被验证。

1 import React from 'react';
2 import { Formik, Form, Field } from 'formik';
3 
4 function validateEmail(value) {
5   let error;
6   if (!value) {
7     error = 'Required';
8   } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)) {
9     error = 'Invalid email address';
10   }
11   return error;
12 }
13 
14 function validateUsername(value) {
15   let error;
16   if (value === 'admin') {
17     error = 'Nice try!';
18   }
19   return error;
20 }
21 
22 export const FieldLevelValidationExample = () => (
23   <div>
24     <h1>Signup</h1>
25     <Formik
26       initialValues={{
27         username: '',
28         email: '',
29       }}
30       onSubmit={values => {
31         // same shape as initial values
32         console.log(values);
33       }}
34     >
35       {({ errors, touched, isValidating }) => (
36         <Form>
37           <Field name="email" validate={validateEmail} />
38           {errors.email && touched.email && <div>{errors.email}</div>}
39 
40           <Field name="username" validate={validateUsername} />
41           {errors.username && touched.username && <div>{errors.username}</div>}
42 
43           <button type="submit">Submit</button>
44         </Form>
45       )}
46     </Formik>
47   </div>
48 );

手动触发验证

您可以使用 Formik 的 validateForm 和 validateField 方法分别手动触发表单级和字段级验证。

1 import React from 'react';
2 import { Formik, Form, Field } from 'formik';
3 
4 function validateEmail(value) {
5   let error;
6   if (!value) {
7     error = 'Required';
8   } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)) {
9     error = 'Invalid email address';
10   }
11   return error;
12 }
13 
14 function validateUsername(value) {
15   let error;
16   if (value === 'admin') {
17     error = 'Nice try!';
18   }
19   return error;
20 }
21 
22 export const FieldLevelValidationExample = () => (
23   <div>
24     <h1>Signup</h1>
25     <Formik
26       initialValues={{
27         username: '',
28         email: '',
29       }}
30       onSubmit={values => {
31         // same shape as initial values
32         console.log(values);
33       }}
34     >
35       {({ errors, touched, validateField, validateForm }) => (
36         <Form>
37           <Field name="email" validate={validateEmail} />
38           {errors.email && touched.email && <div>{errors.email}</div>}
39 
40           <Field name="username" validate={validateUsername} />
41           {errors.username && touched.username && <div>{errors.username}</div>}
42           {/** Trigger field-level validation
43            imperatively */}
44           <button type="button" onClick={() => validateField('username')}>
45             Check Username
46           </button>
47           {/** Trigger form-level validation
48            imperatively */}
49           <button
50             type="button"
51             onClick={() => validateForm().then(() => console.log('blah'))}
52           >
53             Validate All
54           </button>
55           <button type="submit">Submit</button>
56         </Form>
57       )}
58     </Formik>
59   </div>
60 );

何时运行验证？

您可以通过更改 <Formik validateOnChange> 和/或 <Formik validateOnBlur> props 的值来控制 Formik 何时运行验证，具体取决于您的需求。默认情况下，Formik 将按如下方式运行验证方法

在“更改”事件/方法之后（更新 values 的内容）

handleChange
setFieldValue
setValues

在“失焦”事件/方法之后（更新 touched 的内容）

handleBlur
setTouched
setFieldTouched

在尝试提交时

handleSubmit
submitForm

Formik 的渲染/注入 props 还提供了命令式帮助器方法，您可以使用这些方法以命令式方式调用验证。

validateForm
validateField

显示错误消息

错误消息取决于表单的验证。如果存在错误，并且验证函数生成了一个错误对象（应该如此），并且其形状与我们的 values/initialValues 匹配，则可以从 errors 对象访问依赖字段错误。

1 import React from 'react';
2 import { Formik, Form, Field } from 'formik';
3 import * as Yup from 'yup';
4 
5 const DisplayingErrorMessagesSchema = Yup.object().shape({
6   username: Yup.string()
7     .min(2, 'Too Short!')
8     .max(50, 'Too Long!')
9     .required('Required'),
10   email: Yup.string().email('Invalid email').required('Required'),
11 });
12 
13 export const DisplayingErrorMessagesExample = () => (
14   <div>
15     <h1>Displaying Error Messages</h1>
16     <Formik
17       initialValues={{
18         username: '',
19         email: '',
20       }}
21       validationSchema={DisplayingErrorMessagesSchema}
22       onSubmit={values => {
23         // same shape as initial values
24         console.log(values);
25       }}
26     >
27       {({ errors, touched }) => (
28         <Form>
29           <Field name="username" />
30           {/* If this field has been touched, and it contains an error, display it
31            */}
32           {touched.username && errors.username && <div>{errors.username}</div>}
33           <Field name="email" />
34           {/* If this field has been touched, and it contains an error, display
35           it */}
36           {touched.email && errors.email && <div>{errors.email}</div>}
37           <button type="submit">Submit</button>
38         </Form>
39       )}
40     </Formik>
41   </div>
42 );