如何在提交表单之前对 Antd 字段进行 Validation答案

【问题标题】：How to implement Validation on Antd field before submitting the form如何在提交表单之前对 Antd 字段进行 Validation
【发布时间】：2021-06-10 08:25:40
【问题描述】：

当您在输入字段中输入文本时，如何检查电子邮件字段是否有效。我想在提交表单之前在字段有效时更改边框颜色。我已经用 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>

【问题讨论】：

标签： css reactjs forms validation antd

【解决方案1】：

如果你使用 react js，我更喜欢react-hook-form。它非常容易实现并提供多种方式来实现验证，但如果您想在基于类的组件中使用高级表单（如 react-hook-form），它仅适用于功能组件，我建议您 formik form。

【讨论】：

【解决方案2】：

似乎验证将在输入集中时应用。所以一种方法是在输入上创建 onBlur 事件

EmailChange = () => {
  if (form.getFieldError('Email')?.length == 0 ){
       e.target.classList.add('field-border');
   }
}

          <Input onBlur={EmailChange} disabled={!isAdmin}  />

【讨论】：