如何正确使用 AntD FormInstance 函数？

Question

我正在尝试在用户提交表单之前验证用户的输入。如何将输入字段值传递给我的 validateInput 函数，如果它返回 false 触发器并在字段中应用以下属性hasFeedback，validateStatus以及helpconst Demo = () => {  const [form] = form.useForm();  const onFinish = (values) => {    console.log("Success:", values);  };  const onFinishFailed = (errorInfo) => {    console.log("Failed:", errorInfo);  };  const validateInput = (input) => {    const isEmailFormatValid = `regex...`;    var check = input.match(validateFormat);    return check  };  return (    <Form      form={form}      name="basic"      initialValues={{        remember: true,      }}      onFinish={onFinish}      onFinishFailed={onFinishFailed}    >      <Form.Item        label="Email"        name="email"        / * hasFeedback         validateStatus="warning"        help="Invalid email format" */        rules={[          {            required: true,            message: "Please input your email!",          },        ]}      >        <Input />      </Form.Item>      <Form.Item        label="Password"        name="password"        rules={[          {            required: true,            message: "Please input your password!",          },        ]}      >        <Input.Password />      </Form.Item>      <Form.Item>        <Button block type="primary" htmlType="submit">          Submit        </Button>      </Form.Item>    </Form>  );};

Answer 1

<Form.Item>proprules是一个数组，因此您可以向其中添加许多规则。

如果你想检查电子邮件输入是否不为空，同时是一个有效的电子邮件，你可以这样做：

<Form.Item

  label="Email"

  name="email"

  rules={[

    {

      required: true,

      message: "Please input your email!",

    },

    {

      pattern: /your email regex here/,

      message: "Invalid email format",

    },

  ]}

>

  <Input />

</Form.Item>

不需要额外的验证功能。如果不符合指定的正则表达式，将自动显示错误。

你可以在这里看到ant design input的所有规则