ant4 多个form 验证_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 (<>

创建

title="创建"

visible={this.state.visible}

width={660}

onOk={this.handleOk}

onCancel={this.handCancel}

okText="确认"

cancelText="取消"

afterClose={this.handleAfterClose}

maskClosable={false}

destroyOnClose={true}

>

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位汉字、字母、数字、下划线或中英文括号"

},

]}

>

style={{ display: 'inline-block', width: 'calc(20% - 8px)' }}

>

USBKEY

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位汉字、字母、数字、下划线或中英文括号"

},

]}

>

name="space"

noStyle

rules={[{

required: true,

message: "个人空间配额不能为空"

}, {

type: 'number',

min: 1,

max: 100,

message: "个人空间配额为1-100之间整数"

}

]}

>

G

name="private"

noStyle

rules={[

{

required: true,

message: "私密空间配额不能为空"

}, {

type: 'number',

min: 1,

max: 100,

message: "私密空间配额为1-100之间整数"

}

]}

>

G

name="level"

style={{ display: 'inline-block', width: 'calc(80% - 8px)' }}

rules={[

{

required: true,

message: "证书级别不能为空"

},

]}

>

placeholder="请选择证书级别"

allowClear

>

一级

二级

name="server"

style={{ display: 'inline-block', width: 'calc(80% - 8px)' }}

rules={[

{

required: true,

message: "存储服务器不能为空"

},

]}

>

placeholder="请选择存储服务器"

allowClear

>

服务器一

服务器二

name="share"

label="是否允许中心共享"

rules={[

{

required: true,

message: "中心共享不能为空"

},

]}

>

是

否

name="describe"

style={{ display: 'inline-block', width: 'calc(80% - 8px)' }}

rules={[

{

pattern: /^[a-zA-Z0-9_()()，。,.\u4e00-\u9fa5]{0,128}$/,

message: '描述只能为汉字、字母、数字、下划线或中英文逗号、句号和括号'

}

]}

>

>)

}

}