可以通过使用getFieldError和setFields方法结合来实现动态设置校验错误消息。示例代码如下:
import React, { useState } from 'react';
import { Form, Input, Button } from 'antd';
const Demo = () => {
const [form] = Form.useForm();
const [emailError, setEmailError] = useState('');
const handleEmailValidation = (rule, value) => {
if (!value.includes('@')) {
setEmailError('请输入有效的电子邮件地址');
return Promise.reject('输入无效');
}
setEmailError('');
return Promise.resolve();
};
const onFinish = (values) => {
console.log('Received values of form: ', values);
};
const onEmailChange = (event) => {
const { value } = event.target;
form.validateFields(['email']).then(() => {
form.setFields({
email: {
value,
errors: emailError ? [new Error(emailError)] : [],
},
});
});
};
return (
);
};
export default Demo;
上述代码中,我们定义了一个handleEmailValidation方法,用来检查电子邮件地址的合法性,并设置对应的错误消息。同时,我们使用useState来存储错误消息。在onEmailChange方法中,我们首先通过validateFields方法来进行表单校验,然后调用setFields方法来动态设置校验错误消息。最后,在Form.Item中加入onChange事件来触发表单校验和动态设置