花式炼就Form-Item组件—全面掌控表单校验

2023-09-14 01:23:56

表单校验：在 React 中构建健壮的表单

引言：
在当今快节奏的数字世界中，用户期望与网站和应用程序进行无缝交互。表单作为数据收集的基石，扮演着至关重要的角色。然而，确保这些表单收集的数据准确且有效至关重要。表单校验应运而生，为确保用户输入的数据满足特定的标准和限制提供了一个框架。本文将深入探讨在 React 中构建表单校验系统的过程，利用 Form-Item 组件和一个完整的表单校验系统，为您提供构建健壮表单的指南。

剖析 Form-Item 组件：

Form-Item 组件是 React 中表单校验的核心，用于处理单个表单字段的校验逻辑。让我们解剖一下它的基本结构：

import React, { useState } from "react";

const FormItem = ({ label, rules, children }) => {
  const [error, setError] = useState(null);

  const handleChange = (e) => {
    const value = e.target.value;
    // 根据校验规则进行校验
    const errorMessage = validate(value, rules);

    if (errorMessage) {
      setError(errorMessage);
    } else {
      setError(null);
    }
  };

  return (
    <div className="form-item">
      <label>{label}</label>
      {children}
      {error && <div className="error-message">{error}</div>}
    </div>
  );
};

export default FormItem;

关键要点：

FormItem 组件接受三个参数：label（字段标签）、rules（校验规则）和 children（字段本身）。
handleChange 方法处理字段变更事件，并根据校验规则进行校验。
如果校验失败，错误信息将存储在 error 状态中，并在字段下方显示。

构建表单校验系统：

有了 Form-Item 组件，我们可以构建一个全面的表单校验系统：

import React, { useState } from "react";
import FormItem from "./FormItem";

const Form = () => {
  const [formData, setFormData] = useState({});

  const handleSubmit = (e) => {
    e.preventDefault();
    // 收集表单数据并进行校验
    const values = {};
    Array.from(e.target.elements).forEach((field) => {
      if (field.name) {
        values[field.name] = field.value;
      }
    });

    const errors = validateForm(values);
    if (Object.keys(errors).length === 0) {
      // 表单数据有效，提交表单
      submitForm(values);
    } else {
      // 表单数据无效，显示错误信息
      setFormData(errors);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <FormItem label="用户名" rules={[{ required: true }]}>
        <input type="text" name="username" />
      </FormItem>
      <FormItem label="密码" rules={[{ required: true, minLength: 6 }]}>
        <input type="password" name="password" />
      </FormItem>
      <button type="submit">提交</button>
    </form>
  );
};

export default Form;