提交表单前如何在antd字段上实现Validation

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

如果您使用的是 React js，我更喜欢 react-hook-form. It is very easy to and provides multiple ways to implement validations but it only works for the functional component if you want to use advanced forms like react-hook-form in class-based component I would recommend you formik form。

Answer 2

似乎验证将在输入集中时应用。所以一种方法是在 input

上创建 onBlur 事件

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

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

提交表单前如何在antd字段上实现Validation

How to implement Validation on Antd field before submitting the form

css

forms

validation

reactjs

antd