React版Ant Design 4.5.4的Modal中表單驗證

import React from 'react';
import { Modal, Form, Input, Button, InputNumber, Select, Checkbox, Radio } from 'antd';

const { Option } = Select;
const { TextArea } = Input;

const layout = {
    labelCol: {
        span: 5,
    },
    wrapperCol: {
        span: 19,
    }
};

export default class ModalForm extends React.Component {
    state = {
        visible: false,
        value: 0
    };

    // Modal相關
    showModal = () => {
        this.setState({
            visible: true,
        });
    }

    handleOk = e => {
        this.formRef.current.validateFields()
            .then(values => {
                this.formRef.current.resetFields();
                this.setState({
                    visible: false
                });
                console.log("表單值：");
                console.log(values);
            })
            .catch(info => {
                console.log('Validate Failed:', info);
            });
    }

    handCancel = e => {
        this.formRef.current.resetFields();
        this.setState({
            visible: false
        })
    }

    handleAfterClose = () => {
        console.log("modal 關閉了！");
    }

    // 表單相關
    formRef = React.createRef(); // 定義一個表單

    render() {
        return (<>
            <Button type="primary" onClick={this.showModal}>
                創建
            </Button>

            <Modal
                title="創建"
                visible={this.state.visible}
                width={660}
                onOk={this.handleOk}
                onCancel={this.handCancel}
                okText="確認"
                cancelText="取消"
                afterClose={this.handleAfterClose}
                maskClosable={false}
                destroyOnClose={true}
            >
                <Form {...layout} ref={this.formRef} name="control-ref" preserve={false}>
                    <Form.Item label="賬號" style={{ marginBottom: 0 }}>
                        <Form.Item
                            name="account"
                            style={{ display: 'inline-block', width: 'calc(80% - 8px)', marginRight: 15 }}
                            rules={[
                                {
                                    required: true,
                                    message: "賬號不能為空"
                                },
                                {
                                    pattern: /^[a-zA-Z0-9_()（）\u4e00-\u9fa5]{1,32}$/,
                                    message: "賬號為1至32位漢字、字母、數字、下划線或中英文括號"
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            style={{ display: 'inline-block', width: 'calc(20% - 8px)' }}
                        >
                            <Checkbox>USBKEY</Checkbox>
                        </Form.Item>
                    </Form.Item>
                    <Form.Item label="姓名" style={{ marginBottom: 0 }}>
                        <Form.Item
                            name="name"
                            style={{ display: 'inline-block', width: 'calc(80% - 8px)' }}
                            rules={[
                                {
                                    required: true,
                                    message: "姓名不能為空"
                                },
                                {
                                    pattern: /^[a-zA-Z0-9_()（）\u4e00-\u9fa5]{1,32}$/,
                                    message: "姓名為1至32位漢字、字母、數字、下划線或中英文括號"
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>
                    </Form.Item>
                    <Form.Item label="個人空間配額">
                        <Form.Item
                            name="space"
                            noStyle
                            rules={[{
                                required: true,
                                message: "個人空間配額不能為空"
                            }, {
                                type: 'number',
                                min: 1,
                                max: 100,
                                message: "個人空間配額為1-100之間整數"
                            }
                            ]}
                        >
                            <InputNumber style={{ width: 160, marginRight: 15 }} placeholder="1-100之間整數" />
                        </Form.Item>
                        G
                </Form.Item>
                    <Form.Item label="私密空間配額">
                        <Form.Item
                            name="private"
                            noStyle
                            rules={[
                                {
                                    required: true,
                                    message: "私密空間配額不能為空"
                                }, {
                                    type: 'number',
                                    min: 1,
                                    max: 100,
                                    message: "私密空間配額為1-100之間整數"
                                }
                            ]}
                        >
                            <InputNumber style={{ width: 160, marginRight: 15 }} placeholder="1-100之間整數" />
                        </Form.Item>
                        G
                </Form.Item>
                    <Form.Item label="證書級別" style={{ marginBottom: 0 }}>
                        <Form.Item
                            name="level"
                            style={{ display: 'inline-block', width: 'calc(80% - 8px)' }}
                            rules={[
                                {
                                    required: true,
                                    message: "證書級別不能為空"
                                },
                            ]}
                        >
                            <Select
                                placeholder="請選擇證書級別"
                                allowClear
                            >
                                <Option value="1">一級</Option>
                                <Option value="2">二級</Option>
                            </Select>
                        </Form.Item>
                    </Form.Item>
                    <Form.Item label="存儲服務器" style={{ marginBottom: 0 }}>
                        <Form.Item
                            name="server"
                            style={{ display: 'inline-block', width: 'calc(80% - 8px)' }}
                            rules={[
                                {
                                    required: true,
                                    message: "存儲服務器不能為空"
                                },
                            ]}
                        >
                            <Select
                                placeholder="請選擇存儲服務器"
                                allowClear
                            >
                                <Option value="1">服務器一</Option>
                                <Option value="2">服務器二</Option>
                            </Select>
                        </Form.Item>
                    </Form.Item>
                    <Form.Item
                        name="share"
                        label="是否允許中心共享"
                        rules={[
                            {
                                required: true,
                                message: "中心共享不能為空"
                            },
                        ]}
                    >
                        <Radio.Group name="radiogroup">
                            <Radio value={1}>是</Radio>
                            <Radio value={0}>否</Radio>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item label="描述" style={{ marginBottom: 0 }}>
                        <Form.Item
                            name="describe"
                            style={{ display: 'inline-block', width: 'calc(80% - 8px)' }}
                            rules={[
                                {
                                    pattern: /^[a-zA-Z0-9_()（），。,.\u4e00-\u9fa5]{0,128}$/,
                                    message: '描述只能為漢字、字母、數字、下划線或中英文逗號、句號和括號'
                                }
                            ]}
                        >
                            <TextArea rows={4} />
                        </Form.Item>
                    </Form.Item>
                </Form>
            </Modal>
        </>)
    }
}