antd form表单验证，表单初始值

form.setFieldsValue(initialValues);实现设置初始默认值

form.setFieldsValue({ incomingValidMonth: '' });实现设置具体某一个form.item的值为空
form.validateFields()实现对输入的值进行验证

完整代码如下：

import React, { useState, useEffect } from 'react';
import { Button, Form, Modal, Input, } from 'antd';
import _ from 'lodash';
import { connect, useIntl } from 'umi';
import styles from './PaneSvgAddLabelModal.less';
function PaneSvgAddLabelModal({ visible, onCancel, onOk, currentType,currentLabel }) {const intl = useIntl();const [form] = Form.useForm();useEffect(() => {const initialValues = {nameIntl_zh: currentLabel?.node?.nameIntl && currentLabel.node.nameIntl['zh-cn'],nameIntl_en: currentLabel?.node?.nameIntl && currentLabel.node.nameIntl['en-us'],};form.setFieldsValue(initialValues);},[currentLabel]);function handleConfirm() {form.validateFields().then(values => {const nameIntl = {'zh-cn': values.nameIntl_zh,'en-us': values.nameIntl_en,};onOk(nameIntl);});}function handleCancel() {onCancel();}const formItemLayout = {labelCol: { span: 5 },wrapperCol: { span: 17 },};return (<Modalvisible={visible}title={currentType==='Add'?intl.formatMessage({ id: 'company.manager.detail.svg-info-add-label-title' }):currentType==='Rename'?intl.formatMessage({ id: 'company.manager.detail.svg-info-label-rename-title' }):null}onOk={handleConfirm}onCancel={handleCancel}footer={null}><Form form={form} hideRequiredMark><Form.Item{...formItemLayout}label={intl.formatMessage({ id: 'language.chinese' })}name="nameIntl_zh"key='nameIntl_zh'rules={[{required: true,message: intl.formatMessage({ id: 'placeholder.enter' }),},]}><Input placeholder={intl.formatMessage({ id: 'placeholder.enter' })}/></Form.Item><Form.Item{...formItemLayout}label={intl.formatMessage({ id: 'language.english' })}name="nameIntl_en"key='nameIntl_en'rules={[{required: true,message: intl.formatMessage({ id: 'placeholder.enter' }),},]}><Input placeholder={intl.formatMessage({ id: 'placeholder.enter' })}/></Form.Item></Form><div className={styles.PaneSvgEditButtonWrap}><Button value="cancel" className={styles.PaneSvgEditButtonCancel} onClick={handleCancel}>{intl.formatMessage({ id: `btn.cancel` })}</Button><Button value="submit" onClick={handleConfirm} className={styles.PaneSvgEditButtonConfirm}>{intl.formatMessage({ id: `btn.confirm` })}</Button></div></Modal>);
}export default connect(({ user }) => ({
}))(PaneSvgAddLabelModal);

• 对form中的swith进行赋值:valuePropName="checked"

<Form.Itemname="ifOpen"key='ifOpen'valuePropName="checked"
><Switch />
</Form.Item>

• 清空所有表单内容

form.resetFields();

• 表单检测一些更改的值

<FormclassName={styles.content}initialValues={
   {optionType: 'not',}}hideRequiredMarkform={form}onFieldsChange={changedFields => {if (changedFields.length > 0) {const { name, value } = changedFields[0];if (name.length > 0) {if (name[0] === 'optionType') {setOptionType(value);} else if (name[0] === 'inputType') {setInputType(value);}}}}}>

完整代码，给表单内的radio按钮设置初始值，并且随着按钮值变化，而变化

            <FormclassName={styles.content}initialValues={
   {whetherSubmit: 'can_submit',}}hideRequiredMarkform={form}onFieldsChange={changedFields => {if (changedFields.length > 0) {const { name, value } = changedFields[0];if (name.length > 0) {if (name[0] === 'whetherSubmit') {setCanSubmit(value);}}}}}><Form.Itemkey="whetherSubmit"isIntl={false}label='1'name="whetherSubmit"input={<Radio.Group><Radio value="Do_not_submit">no</Radio><Radio value="can_submit">yes</Radio></Radio.Group>}/>{canSubmit === 'can_submit' && <div><Form.Itemkey="verification"isIntl={false}label='2'name="verification"input={<Button>按钮</Button>}/></div>}</Form>

• 获取我们form表单的值

form.getFieldValue('prefilledValue')

• 出现报错信息：validateDOMNesting(...): <form> cannot appear as a descendant of <form>.

原因是：DOM renders to something like this

<form><div><form><input /></form></div>
</form>

• antd form catch捕获没有通过验证的字段，同时使光标对应到报错位置

  const onOk = () => {form.validateFields().then((values) => {props.onSubmit(values);}).catch((err) => {console.log('===========catch err', err);if (err?.errorFields[0]?.name) {form.getFieldInstance(err?.errorFields[0]?.name[0]).focus();}});};

• form表单的验证规则

方法一：正则匹配

        <Form.Itemlabel="版本号"name="appVersion"rules={[{ required: true, message: '请输入版本号！' },{ pattern: new RegExp(/^[0-9]\d*$/, 'g'), message: '只能输入数字' },]}><Input placeholder="请输入版本号" maxLength={11} /></Form.Item>

 方法二：自定义校验规则

rules={[{required: true,message: intl.formatMessage({ id: 'message.manage.notice.add.limit.tip' }),},({ getFieldValue }) => ({validator(_, value) {if (value && value.length<=140) {return Promise.resolve();}return Promise.reject(new Error(intl.formatMessage({ id: 'message.manage.notice.add.limit.tip' })));},}),]}