【react】 可复用 form 表单校验逻辑封装

【react】 form表单校验逻辑封装

好的，接下来我们将创建一个可复用的 React 表单校验封装组件。我们将使用 React 的状态和上下文功能来管理表单的校验状态和错误信息。我们还将实现一些常见的校验规则，并使其易于扩展。

实现步骤

1. 创建一个 FormProvider 组件来提供表单上下文。
2. 创建一个 useForm 钩子来使用表单上下文。
3. 创建一个 useField 钩子来管理单个表单字段的状态和校验。
4. 创建一些常见的校验规则。
5. 创建示例表单来展示如何使用这些封装组件。

1. 创建 FormProvider.js

import React, { createContext, useContext, useState } from "react"

const FormContext = createContext()

export const FormProvider = ({ children, onSubmit }) => {
  const [fields, setFields] = useState({})
  const [checkedAll, setCheckedAll] = useState(false)

  const registerField = ({ name, label, validate, defaultValue }) => {
    setFields((prev) => ({
      ...prev,
      [name]: { name, label, value: defaultValue, validate, error: null }
    }))
  }

  const updateFieldValue = (name, value) => {
    const field = fields[name]
    if (field) {
      setFields((prev) => ({ ...prev, [name]: { ...prev[name], value } }))
    }
  }

  const setFieldError = (name, error) => {
    setFields((prev) => ({ ...prev, [name]: { ...prev[name], error } }))
  }

  const validateField = (name, value) => {
    const field = fields[name]
    if (field && field.validate) {
      const error = field.validate(value)
      setFieldError(name, error)
      return error
    }
    return null
  }

  const validateAllFields = (formData) => {
    let isValid = true
    Object.keys(formData).forEach((name) => {
      if (!!validateField(name, formData[name])) {
        isValid = false
      }
    })
    if (!isValid) {
      setCheckedAll(true)
    }
    return isValid
  }

  const handleSubmit = (event) => {
    event.preventDefault()
    const formData = Object.values(fields).reduce(
      (acc, field) => ({ ...acc, [field.name]: field.value }),
      {}
    )

    if (validateAllFields(formData)) {
      onSubmit(formData)
    }
  }

  return (
    <FormContext.Provider
      value={{
        registerField,
        validateField,
        updateFieldValue,
        checkedAll
      }}
    >
      <form onSubmit={handleSubmit}>{children}</form>
    </FormContext.Provider>
  )
}

export const useForm = () => {
  return useContext(FormContext)
}

2. 创建 useField.js

import { useState, useEffect } from "react"
import { useForm } from "./FormProvider"

const useField = ({ name, label, validate, defaultValue }) => {
  const { registerField, validateField, updateFieldValue, checkedAll } =
    useForm()
  const [value, setValue] = useState(defaultValue)
  const [error, setError] = useState(null)

  useEffect(() => {
      // 将 field 中的全部属性注入到 FormContext 管理
      registerField({ name, label, validate, defaultValue })
  }, [])

  useEffect(() => {
  	// 当 value 变化时，同步更新 field 中的 value 字段值
    updateFieldValue(name, value)
  }, [value])

  useEffect(() => {
    // 点击 submit 提交按钮，全局检测如果校验失败，显示错误信息
    if (validate && checkedAll) {
      const error = validateField(name, value)
      setError(error)
    }
  }, [validate, checkedAll])

  const handleChange = (e) => {
    const newValue = e.target.value
    setValue(newValue)
  }

  const handleBlur = () => {
    const error = validateField(name, value)
    setError(error)
  }

  return { value, error, handleChange, handleBlur }
}

export default useField

3. 创建一些常见的校验规则

// src/validationRules.js
export const required = (value) => {
  return value ? null : 'This field is required';
};

export const minLength = (min) => (value) => {
  return value.length >= min ? null : `Minimum length is ${min}`;
};

export const email = (value) => {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return emailRegex.test(value) ? null : 'Invalid email address';
};

4. 创建示例表单 MyForm.js

import React from 'react';
import { FormProvider } from './FormProvider';
import useField from './useField';
import { required, minLength, email } from './validationRules';

// 简单实现 Form 表单中的 TextIput 组件，可根据需要自行扩展其他组件
const TextInput = ({ name, label, validate, defaultValue = "" }) => {
  const { value, error, handleChange, handleBlur } = useField({
    name,
    label,
    validate,
    defaultValue
  })

  return (
    <div>
      <label>{label}</label>
      <input
        name={name}
        value={value}
        onChange={handleChange}
        onBlur={handleBlur}
      />
      {error && <span style={{ color: "red" }}>{error}</span>}
    </div>
  )
}

const MyForm = () => {
  const handleSubmit = (values) => {
    console.log('Form Submitted!', values);
  };

  return (
    <FormProvider onSubmit={handleSubmit}>
      <TextInput name="username" label="Username" validate={required} />
      <TextInput name="email" label="Email" validate={email} />
      <TextInput name="password" label="Password" validate={minLength(6)} />
      <button type="submit">Submit</button>
    </FormProvider>
  );
};

export default MyForm;

5. 入口文件 index.js

import React from 'react';
import ReactDOM from 'react-dom';
import MyForm from './MyForm';

ReactDOM.render(
  <React.StrictMode>
    <MyForm />
  </React.StrictMode>,
  document.getElementById('root')
);

总结

通过以上步骤，我们实现了一个 React 表单校验封装，包括：

1. 创建表单上下文并提供表单注册和校验功能。
2. 创建自定义钩子来管理单个表单字段的状态和校验。
3. 实现 TextInput 文本框的校验规则并在表单组件中使用。

这样可以轻松扩展和复用表单校验逻辑。你可以根据自己的需求增加更多的校验规则和表单字段类型。