Ant Design Pro 的 EditableProTable 组件提供了表格验证的功能,其实现的关键在于将验证规则通过装饰器传递给 EditableTable 组件。下面是具体实现步骤:
- 安装依赖
在项目中增加对 rc-form
和 formik
包的依赖。
npm i rc-form formik
- 创建验证规则
可通过使用 formik
包中提供的 object()
函数来创建验证规则。以下代码演示了如何验证一个邮箱地址和一个数字:
import { object, string, number } from "formik";
const validationSchema = object().shape({
email: string().email("不合法的邮箱地址"),
num: number().moreThan(0, "数字必须大于零"),
});
在以上的代码中,validationSchema
将会验证一个对象,在这个对象中,email
必须是合法的邮箱地址,num
则必须大于 0。
- 将验证规则和表格结合
在 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
数组中,我们也指定了每个字段对应的验证规则。
- 处理验证结果
在 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技术站