驗證

Formik 的設計旨在輕鬆管理具有複雜驗證的表單。Formik 支援同步和非同步的表單級和欄位級驗證。此外，它還內建支援透過 Yup 進行基於 Schema 的表單級驗證。本指南將詳細說明以上所有內容。

驗證的類型

表單級驗證

表單級驗證很有用，因為您可以在函式執行時完全存取所有表單的 values 和屬性，因此您可以同時驗證相依欄位。

有兩種方法可以使用 Formik 進行表單級驗證

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

`validate`

<Formik> 和 withFormik() 接受一個名為 validate 的屬性/選項，它接受同步或非同步函式。

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`

如您在上面看到的，驗證由您決定。您可以自行編寫驗證器或使用第三方函式庫。在 The Palmer Group，我們使用 Yup 進行物件 Schema 驗證。它有一個與 Joi 和 React PropTypes 非常相似的 API，但它足夠小，可以在瀏覽器中使用，並且速度足夠快，可以在執行時使用。因為我們 ❤️ Yup 非常多，所以 Formik 有一個針對 Yup 物件 Schema 的特殊設定選項/屬性，稱為 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> 元件的 validate 屬性或 useField hook 進行欄位級驗證。此函式可以是同步或非同步的（返回 Promise）。預設情況下，它會在任何 onChange 和 onBlur 之後執行。可以使用頂層 <Formik/> 元件中的 validateOnChange 和 validateOnBlur 屬性分別更改此行為。除了更改/模糊之外，所有欄位級驗證都會在提交嘗試開始時執行，然後將結果與任何頂層驗證結果深度合併。

注意：<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> 屬性的值來控制 Formik 何時執行驗證。預設情況下，Formik 將按如下方式執行驗證方法

**在「更改」事件/方法之後**（更新 values 的操作）

handleChange
setFieldValue
setValues

**在「模糊」事件/方法之後**（更新 touched 的操作）

handleBlur
setTouched
setFieldTouched

每次嘗試提交時

handleSubmit
submitForm

Formik 的渲染/注入屬性也为您提供了一些命令式輔助方法，您可以使用它們以命令式方式呼叫驗證。

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 );