如何在提交表单之前对Antd字段进行验证

Question

当您在输入字段中输入文本时，如何检查电子邮件字段是有效的。在提交表单之前，我想在字段有效时更改边框颜色。我已经用className实现了getFieldError，但它不起作用

<Form.Item
validateTrigger="onBlur"
name="Email"
label="E-mail Address"

rules={[
{
type: "email",
message: "The input is not valid E-mail!",
},
{
required: true,
message: "Please input your E-mail!",
},
{
min: 5,
message: "'Email' must be between 5 and 255 characters.",
},
]}
>

<Input className={`${(form.getFieldError('Email').length == 0 && form.getFieldValue('Email') != undefined)  ? 'field-border' : ''}`}   disabled={!isAdmin}  />
</Form.Item>

Answer 1

当输入集中时，似乎会应用验证。因此，一种方法是在输入上创建onBlur事件

EmailChange = () => {
if (form.getFieldError('Email')?.length == 0 ){
e.target.classList.add('field-border');
}
}
<Input onBlur={EmailChange} disabled={!isAdmin}  />

Answer 2

如果您使用的是react js，我更喜欢react hook形式。它很容易实现验证，并提供了多种方法来实现验证，但它只适用于功能组件，如果你想在基于类的组件中使用高级表单，如react hook表单，我建议你使用formik表单。