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

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

  1. 安装依赖

在项目中增加对 rc-formformik 包的依赖。

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

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

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

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

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • JS性能优化实现方法及优点进行

    JS性能优化实现方法及优点 JS性能优化是Web前端开发中的重要任务之一,优化JS性能有助于提高网站的访问速度和用户体验。本攻略将从以下几个方面进行详细讲解。 1. 减少DOM操作 DOM操作是JS性能影响最大的一部分,频繁的DOM操作会引起浏览器的重绘和回流,从而影响页面的性能。因此,减少DOM操作是JS性能优化的一种有效方法。 示例1:在DOM结构中添加…

    JavaScript 2023年6月10日
    00
  • JavaScript+Canvas实现带跳动效果的粒子动画

    实现带跳动效果的粒子动画可以使用JavaScript和Canvas,下面是具体步骤: 步骤一:创建画布和粒子对象 首先,在HTML中创建一个canvas画布,并用JavaScript获取该画布对象。然后,定义粒子对象,包括粒子的位置、半径、速度、弹性等属性,以及在画布上绘制粒子的方法。以下是示例代码: <canvas id="myCanvas…

    JavaScript 2023年6月10日
    00
  • jquery实现浮动在网页右下角的彩票开奖公告窗口代码

    下面我将详细讲解“jquery实现浮动在网页右下角的彩票开奖公告窗口代码”的攻略。 基本思路 我们的目标是实现一个浮动在网页右下角的彩票开奖公告窗口。具体实现思路如下: 在页面底部右下角添加一个固定宽度和高度的 div 元素,设置其 position 属性为 fixed,bottom 和 right 属性为 0,这样就可以让该元素始终浮动在页面的右下角。 在…

    JavaScript 2023年6月11日
    00
  • JavaScript 高级语法介绍

    JavaScript 高级语法介绍攻略 什么是 JavaScript 高级语法? JavaScript 高级语法是指相对于语言基础而言更深入、更难掌握的语言知识部分。学习 JavaScript 高级语法可以帮助开发者更加灵活地运用 JavaScript 编程语言,实现更复杂、更高级的功能。 JavaScript 高级语法包括哪些? JavaScript 高级…

    JavaScript 2023年5月18日
    00
  • ES6知识点整理之数组解构和字符串解构的应用示例

    针对ES6知识点整理之数组解构和字符串解构的应用示例,我的建议是按照以下步骤进行: 1. 了解ES6中的解构赋值 解构赋值是ES6新增的语法特性,它允许我们从数组或者对象中提取值,然后对变量进行赋值。它的一般语法格式如下: let [a, b, …rest] = [1, 2, 3, 4, 5]; console.log(a); // 1 console.…

    JavaScript 2023年5月28日
    00
  • JavaScript 笔记

    JavaScript 简介 JavsScript 于 1995 年由 Brendan Eich 用时 10 天写出,用于网景浏览器。最初的名字叫 LiveScript,也被部分员工称为 Mocha。那时 Java 语言很流行,出于商业化的考量,更名为 JavaScript,但两者之间没有关联。 最早的 JS 作为脚本语言给浏览器增加一些诸如鼠标跟随等交互性特…

    JavaScript 2023年5月7日
    00
  • js事件监听器用法实例详解

    下面是“js事件监听器用法实例详解”的攻略: 什么是事件监听器? 事件监听器(Event Listener)是一种常用的 JavaScript 技术,它用来监听特定元素(如 DOM 元素)上的特定事件(如单击、滚动、鼠标移动、键盘按键等),并在事件发生时触发执行指定的回调函数。这种技术可以实现 Web 页面上的交互效果,比如:按钮单击后弹出框、下拉菜单、图片…

    JavaScript 2023年6月10日
    00
  • JavaScript块级作用域绑定的实现流程

    JavaScript的块级作用域绑定是ES6中新增的特性,它使得变量声明可以仅在块级作用域中起作用,可以避免因变量定义不当所出现的一些各种问题。块级作用域是指一对花括号”{ }”之间的区域,这种变量称为块级作用域变量。 实现块级作用域绑定的流程主要依靠let和const关键字这两个特性。let关键字声明的变量只在声明位置所在的块级作用域内有效,const关键…

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