react antd 表单提交触发校验

步骤

表单校验的过程可以分为为两步：（1）给表单添加校验规则；（2）提交时触发校验方法

注意

声明：本文讲的是在 class 组件中的表单校验

需要注意几点：

• 调用校验方法 validateFields() 需要通过注册的 form
• 在 class 组件中注册 form 和函数组件不同，是通过 ref 属性

官网说明

实例代码

import {Form} } from "antd"

export default class AddOne extends Component {
	formRef = React.createRef()
	onCheck = async () => {
	  try {
	    const values = await this.formRef.current.validateFields();
	    console.log('Success:', values);
	    message.success('提交校验成功')
	  } catch (errorInfo) {
	    console.log('Failed:', errorInfo);
	    message.warn('提交校验失败')
	  }
	}
	
	render() {
		return (
			<div>
				<Form ref={this.formRef} labelCol={{ span: 5 }}>
	              <Form.Item label="标题："
	                name="title"
	                rules={[{ required: true, message: '请输入标题' }]}
	              >
	                <Input placeholder="请输入标题" />
	              </Form.Item>
	              <Form.Item label="描述："
	                name="desc"
	                rules={[{ required: true, message: '请填写描述' }]}
	              >
	                <TextArea placeholder="请填写描述" rows={3} />
	              </Form.Item>
	            </Form>
	            <div style={{ textAlign: "center" }}>
	              <Button onClick={this.onCheck} htmlType="submit" type="primary">提交</Button>
	              <Button onClick={() => { message.warn('取消提交') }} danger style={{ marginLeft: 30 }}>删除</Button>
	            </div>
            </div>
		)
	}
}

实现效果

• 校验项会出现红色 * 提示
• 点击提交按钮时，会触发校验
• 点击提交按钮前：
• • 未进行输入，失去焦点，不会触发单个校验；
• • 进行输入，又清空输入（无需等到失去焦点），会触发单个校验
• 点击提交按钮后，进行输入又清空输入（无需等到失去焦点）会触发单个校验