Formik：表單驗證神器！

Formik：React 中的表單驗證神器

在現代 Web 應用程序中，表單扮演著至關重要的角色，它允許使用者與應用程序互動，提交數據和進行操作。然而，表單驗證是一項繁瑣且耗時的任務，它需要仔細檢查使用者輸入的資料，確保其正確性和有效性。

在 React 中，Formik 是表單驗證的強力盟友。它是一款專門設計的表單管理庫，簡化了驗證流程，使開發人員能夠輕鬆創建出健壯且友善的表單體驗。

為什麼選擇 Formik？

• 簡化驗證： Formik 提供了一套直觀的 API，讓驗證變得輕而易舉，減少了開發時間。
• 強大錯誤處理： Formik 具有強大的錯誤處理功能，可輕鬆處理表單錯誤，並提供明確的錯誤訊息。
• 即時驗證： Formik 支援即時驗證，當使用者輸入資料時，可立即提供回饋，避免提交無效資料。
• 狀態管理： Formik 允許輕鬆管理表單狀態，包括表單值、錯誤訊息和驗證狀態。

使用 Formik 入門

1. 安裝 Formik

使用 npm 安裝 Formik：

npm install formik

2. 創建表單組件

import React, { useState } from "react";
import { Formik, Form, Field } from "formik";

const MyForm = () => {
  // 初始化表單值
  const [values, setValues] = useState({
    name: "",
    email: "",
  });

  // 表單提交處理函式
  const handleSubmit = (values, { setSubmitting }) => {
    // 表單驗證和提交邏輯
    setSubmitting(false);
    console.log(values);
  };

  return (
    <Formik initialValues={values} onSubmit={handleSubmit}>
      <Form>
        {/* 表單欄位 */}
        <label htmlFor="name">姓名</label>
        <Field id="name" name="name" type="text" />
        <label htmlFor="email">電子郵件</label>
        <Field id="email" name="email" type="email" />

        {/* 提交按鈕 */}
        <button type="submit">提交</button>
      </Form>
    </Formik>
  );
};

export default MyForm;

與 Ant Design 表單元件整合

如果你想將 Formik 與 Ant Design 的表單元件整合，可以參考以下範例：

import React, { useState } from "react";
import { Form, Input, Button } from "antd";
import { useFormik } from "formik";

const MyForm = () => {
  // 初始化表單值
  const [values, setValues] = useState({
    name: "",
    email: "",
  });

  // 使用 useFormik Hook 建立 Formik 表單
  const formik = useFormik({
    initialValues: values,
    onSubmit: (values, { setSubmitting }) => {
      // 表單驗證和提交邏輯
      setSubmitting(false);
      console.log(values);
    },
  });

  return (
    <Form form={formik}>
      {/* 表單欄位 */}
      <Form.Item label="姓名">
        <Input id="name" name="name" value={formik.values.name} onChange={formik.handleChange} />
      </Form.Item>

      <Form.Item label="電子郵件">
        <Input id="email" name="email" value={formik.values.email} onChange={formik.handleChange} />
      </Form.Item>

      {/* 提交按鈕 */}
      <Form.Item>
        <Button type="primary" htmlType="submit">
          提交
        </Button>
      </Form.Item>
    </Form>
  );
};

export default MyForm;

結論

Formik 是 React 中一款強大的表單驗證工具，它簡化了驗證流程，並提供了優異的錯誤處理功能。透過使用 Formik，開發人員可以輕鬆打造出健全且友善的表單體驗。

常見問題解答

1. Formik 能否與其他表單庫一起使用？
   是的，Formik 可以與大多數表單庫整合，包括 Ant Design、React Bootstrap 和 Material UI。

2. Formik 支援哪些驗證類型？
   Formik 支援各種驗證類型，包括：必填、最小長度、最大長度、電子郵件格式和自訂驗證。

3. Formik 能否進行非同步驗證？
   是的，Formik 支援非同步驗證，允許在提交表單時透過 API 呼叫進行驗證。

4. Formik 與 Redux 整合良好嗎？
   是的，Formik 可以與 Redux 很好地整合，允許在 Redux 狀態中管理表單狀態。

5. Formik 有哪些可用的擴充功能？
   Formik 有一個活躍的社群和許多可用擴充功能，可以進一步擴充其功能，例如自訂驗證規則、國際化和表單佈局。