1. Python技术站首页
  2. 其他
  3. JavaScript

ant-design-pro 的EditableProTable表格验证调用的实现代码

• JavaScript

Ant Design Pro 的 EditableProTable 组件提供了表格验证的功能，其实现的关键在于将验证规则通过装饰器传递给 EditableTable 组件。下面是具体实现步骤：

  1. 安装依赖

在项目中增加对 rc-form 和 formik 包的依赖。

npm i rc-form formik
  1. 创建验证规则

可通过使用 formik 包中提供的 object() 函数来创建验证规则。以下代码演示了如何验证一个邮箱地址和一个数字：

import { object, string, number } from "formik";

const validationSchema = object().shape({
  email: string().email("不合法的邮箱地址"),
  num: number().moreThan(0, "数字必须大于零"),
});

在以上的代码中，validationSchema 将会验证一个对象，在这个对象中，email 必须是合法的邮箱地址，num 则必须大于 0。

  1. 将验证规则和表格结合

在 EditableProTable 组件中增加 recordCreatorProps 属性，之后在其中指定规则对象。

import { EditableProTable } from "@ant-design/pro-table";
import { FormikProvider, useFormik } from "formik";

function EditableTable({ dataSource }: { dataSource: any[] }) {
  const validationSchema = object().shape({
    email: string().email("不合法的邮箱地址"),
    num: number().moreThan(0, "数字必须大于零"),
  });
  const [form] = useFormik({
    validationSchema,
  });

  return (
    <FormikProvider value={form}>
      <EditableProTable
        recordCreatorProps={{
          record: {},
          position: "top",
          newRecordType: 'dataSource',
          validator: validationSchema.validateSync
        }}
        columns={[
          {
            title: "文本",
            dataIndex: "text",
            formItemProps: {
              rules: [{ required: true, message: "请填写文本" }],
            },
            width: 100,
            editable: true,
          },
          {
            title: "邮箱",
            dataIndex: "email",
            formItemProps: {
              rules: [{ required: true, message: "请填写邮箱" }],
            },
            width: 300,
            editable: true,
          },
          {
            title: "数字",
            dataIndex: "num",
            formItemProps: {
              rules: [{ required: true, message: "请填写数字" }],
            },
            width: 100,
            editable: true,
          },
        ]}
        dataSource={dataSource}
        editable={{
          type: "multiple",
          editableKeys,
          onBlur: async () => {
            for (let i = 0; i < editableKeys.length; i++) {
              const key = editableKeys[i];
              await formik.submitForm();
              if (formik.errors[key]) {
                // 处理验证失败的结果
              } else {
                // 处理验证成功的结果
              }
            }
            // 清除列表的当前编辑状态
            setEditableKeys([]);
            setEditingKey("");
          },
        }}
      />
    </FormikProvider>
  );
}

在以上的代码中，我们将验证规则对象传递给了 EditableProTable 组件的 recordCreatorProps 属性，并且指定了校验的函数 validator。同时，在 columns 数组中，我们也指定了每个字段对应的验证规则。

  1. 处理验证结果

在 onBlur 属性中，我们需要处理每个编辑状态下的验证结果。若验证通过，则继续执行其他操作；若验证失败，则需要执行需要的错误处理代码。

以上就是 EditableProTable 组件验证的全部实现。接下来我们看一下两个具体的示例：

示例1

在这个示例中，我们将会创建一个可以填写和修改用户信息的表格，并新增了对邮箱、手机号和身份证号码的验证。

创建验证规则

import { object, string, number } from "formik";

const validationSchema = object().shape({
  name: string().required("姓名不能为空"),
  email: string().email("不合法的邮箱地址"),
  mobile: string().matches(/^[1][0-9]{10}$/, "不合法的手机号码"),
  idCard: string().matches(/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, "不合法的身份证号码"),
});

创建表格

import { EditableProTable } from "@ant-design/pro-table";
import { FormikProvider, useFormik } from "formik";

function EditableTable({ dataSource }: { dataSource: any[] }) {
  const validationSchema = object().shape({
    name: string().required("姓名不能为空"),
    email: string().email("不合法的邮箱地址"),
    mobile: string().matches(/^[1][0-9]{10}$/, "不合法的手机号码"),
    idCard: string().matches(/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, "不合法的身份证号码"),
  });
  const [editableKeys, setEditableKeys] = useState([]);
  const [editingKey, setEditingKey] = useState("");

  const [form] = useFormik({
    validationSchema,
  });

  return (
    <FormikProvider value={form}>
      <EditableProTable
        rowKey="id"
        recordCreatorProps={{
          record: {},
          position: "top",
          newRecordType: 'dataSource',
          validator: validationSchema.validateSync
        }}
        columns={[
          {
            title: "姓名",
            dataIndex: "name",
            formItemProps: {
              rules: [{ required: true, message: "请填写姓名" }],
            },
            width: 150,
            editable: true,
          },
          {
            title: "邮箱",
            dataIndex: "email",
            formItemProps: {
              rules: [{ required: true, message: "请填写邮箱" }],
            },
            width: 300,
            editable: true,
          },
          {
            title: "手机号码",
            dataIndex: "mobile",
            formItemProps: {
              rules: [{ required: true, message: "请填写手机号码" }],
            },
            width: 160,
            editable: true,
          },
          {
            title: "身份证号码",
            dataIndex: "idCard",
            formItemProps: {
              rules: [{ required: true, message: "请填写身份证号码" }],
            },
            width: 200,
            editable: true,
          },
        ]}
        dataSource={dataSource}
        editable={{
          type: "multiple",
          editableKeys,
          onBlur: async () => {
            for (let i = 0; i < editableKeys.length; i++) {
              const key = editableKeys[i];
              await formik.submitForm();
              if (formik.errors[key]) {
                // 处理验证失败的结果
              } else {
                // 处理验证成功的结果
              }
            }
            // 清除列表的当前编辑状态
            setEditableKeys([]);
            setEditingKey("");
          },
        }}
      />
    </FormikProvider>
  );
}

注意，由于 EditableProTable 组件依赖于 formik，因此在 FormikProvider 中引入 formik。

示例2

在这个示例中，我们将会演示 EditableProTable 组件如何实现联级验证。当填写的是同样基于省、市、区（县）的地址时，需要保证省和市是必填项，并且区（县）是省和市选择后的必填项。

创建验证规则

import { object, string } from "formik";

const regionValidationSchema = object().shape({
  province: string().required("省份不能为空"),
  city: string().required("城市不能为空"),
  district: string().required("区县不能为空"),
});

创建表格

import { EditableProTable } from "@ant-design/pro-table";
import { FormikProvider, useFormik } from "formik";

function EditableTable({ dataSource }: { dataSource: any[] }) {
  const [editableKeys, setEditableKeys] = useState([]);
  const [editingKey, setEditingKey] = useState("");

  const [regionForm] = useFormik({
    validationSchema: regionValidationSchema,
  });
  const [form] = useFormik({
    validationSchema: [
      (values) => {
        if (values.addressType === "region") {
          return regionValidationSchema;
        } else {
          return object();
        }
      },
    ],
  });

  return (
    <>
      <FormikProvider value={regionForm}>
        <EditableProTable
          rowKey="id"
          recordCreatorProps={{
            record: {},
            position: "top",
            newRecordType: 'dataSource',
            validator: regionValidationSchema.validateSync // 指定验证规则
          }}
          columns={[
            {
              title: "省份",
              dataIndex: "province",
              formItemProps: {
                rules: [{ required: true, message: "请选择省份" }],
              },
              width: 150,
              editable: true,
            },
            {
              title: "城市",
              dataIndex: "city",
              formItemProps: {
                rules: [{ required: true, message: "请选择城市" }],
              },
              width: 150,
              editable: true,
            },
            {
              title: "区县",
              dataIndex: "district",
              formItemProps: {
                rules: [{ required: true, message: "请选择区县" }],
              },
              width: 150,
              editable: true,
            },
          ]}
          dataSource={dataSource}
          editable={{
            type: "single",
            editableKeys,
            onBlur: async (record, index) => {
              if (record.addressType === "region") {
                await regionForm.submitForm();
              }
              await form.submitForm();
              if (formik.errors[index]) {
                // 处理验证失败的结果
              } else {
                // 处理验证成功的结果
              }
              setEditableKeys([]);
              setEditingKey("");
            },
          }}
        />
      </FormikProvider>
      <FormikProvider value={form}>
        <div>
          地址类型：
          <Radio.Group
            name="addressType"
            options={[
              { label: "地址", value: "address" },
              { label: "省/市/区县", value: "region" },
            ]}
          />
        </div>
      </FormikProvider>
    </>
  );
}

在以上的代码中，我们定义了两个验证规则 validationSchema 和 regionValidationSchema，前者仅校验地址类型为实际地址时的字段，后者仅校验地址类型为省、市、区县时的省、市和区县字段。同时我们使用 formik 包中提供的 object 函数，在地址类型设置为实际地址的时候，不进行任何验证。

在代码中，我们通过维护两个 FormikProvider 包裹的表单，实现了表格内单独验证。EditableProTable 组件加入 onBlur 监听事件，当失去编辑框焦点时，将这个表单进行提交，并处理验证结果。同时，我们在页面上添加了一个单选框，用于选择地址类型进行验证。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：ant-design-pro 的EditableProTable表格验证调用的实现代码 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • 一种新的日期处理方式之JavaScript Temporal API

    一、JavaScript Temporal API简介 JavaScript Temporal API是一个新的JavaScript API，它提供了一种新的日期和时间处理方式，用于简化处理日期、时间和时间间隔的操作。它的设计目标是提供一个简单易用的API，能够处理所有的日期和时间操作，包括处理时区、分别取年月日等操作。 二、安装JavaScript Tem…

    JavaScript 2023年6月10日
    00

  • isArray()函数(JavaScript中对象类型判断的几种方法)

    下面是关于isArray()函数以及JavaScript中对象类型判断的几种方法的完整攻略。 1. isArray()函数 isArray()是JavaScript中的一个内置方法，用来判断一个对象是否是数组。它返回一个布尔值，为true表示对象是数组，为false表示对象不是数组。下面是isArray()函数的语法： Array.isArray(obj) …

    JavaScript 2023年6月10日
    00

  • 一篇文章教你写出干净的JavaScript代码

    以下是“一篇文章教你写出干净的JavaScript代码”的完整攻略： 1. 注重代码风格的统一性 在写JavaScript代码时，我们要注重代码风格的统一性。一个好的规范在团队协作时非常重要，可以提高代码的可维护性和可读性，避免出现一些低级错误。我们可以采用一些代码风格规范化的工具，比如ESLint和Prettier等。 2. 避免全局变量的滥用 在Java…

    JavaScript 2023年6月1日
    00

  • JavaScript 中URL 查询字符串(query string)的序列与反序列化的方法

    下面就是在 JavaScript 中URL 查询字符串(query string)的序列化与反序列化的方法的攻略： URL 查询字符串序列化 如果我们想在 JavaScript 中将一个对象转换为 URL 查询参数字符串，可以使用默认的 toString() 方法。toString() 方法可以遍历一个对象中的属性并将其转换为 URL 查询参数字符串。这里是…

    JavaScript 2023年5月19日
    00

  • JS使用正则表达式过滤多个词语并替换为相同长度星号的方法

    使用正则表达式过滤多个词语并替换为相同长度星号是实现信息过滤和敏感词检测的重要方法。下面是具体步骤： 定义敏感词列表 首先，需要定义敏感词列表。可以将敏感词保存在服务器数据库或者直接写在JavaScript代码中。 const badWords = [‘bad’, ‘worse’, ‘worst’]; 在此示例中，敏感词列表包含三个单词：”bad”、”wor…

    JavaScript 2023年6月10日
    00

  • 实现非常简单的js双向数据绑定

    实现简单的双向数据绑定，主要需要掌握以下两个知识点： 如何监听输入框的变化事件并更新数据模型 如何监听数据模型的变化并更新对应的HTML元素 下面我们分别介绍这两个知识点的实现方法，以及两个示例说明。 监听输入框变化事件 在HTML中，输入框的值可以通过value属性获取到。我们可以使用EventTarget.addEventListener()方法来监听输…

    JavaScript 2023年6月10日
    00

  • JS获取当前时间的实例代码(昨天、今天、明天)

    获取当前时间是JavaScript中比较基础的内容，可以通过Date对象的方法获取到当前的时间、日期等信息。对于“昨天、今天、明天”的需求，可以在获取当前时间的基础上，通过一些计算方法实现。 以下是获取当前时间及计算“昨天、今天、明天”的示例代码： 获取当前时间的实例代码 const now = new Date(); // 创建一个Date对象，获取当前时…

    JavaScript 2023年5月27日
    00

  • JavaScript三大重点同步异步与作用域和闭包及原型和原型链详解

    一、同步异步 JavaScript代码的执行分为同步和异步两种方式。同步是指代码执行的顺序和书写顺序一致,代码执行时必须等待上一行执行完成，才执行下一行。异步是指代码执行的顺序和书写顺序不一致，可以在等待某些操作完成时执行其他代码，操作完成时再回调执行。 JavaScript的异步编程实现有两种方式：1. 回调函数2. Promise 其中Promise是回…

    JavaScript 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部