如何正确使用 AntD FormInstance 函数？

Question

我正在尝试在用户提交表单之前验证用户的输入。如何将输入字段值传递给我的 validateInput 函数，如果它返回 false 触发器并在字段中应用以下属性hasFeedback，validateStatus以及help




const 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&nbsp; label="Email"&nbsp; name="email"&nbsp; rules={[&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; required: true,&nbsp; &nbsp; &nbsp; message: "Please input your email!",&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; pattern: /your email regex here/,&nbsp; &nbsp; &nbsp; message: "Invalid email format",&nbsp; &nbsp; },&nbsp; ]}>&nbsp; <Input /></Form.Item>不需要额外的验证功能。如果不符合指定的正则表达式，将自动显示错误。你可以在这里看到ant design input的所有规则