Antd表单输入双重验证答案

【问题标题】：Antd form input double validationAntd表单输入双重验证
【发布时间】：2022-01-06 11:36:14
【问题描述】：

所以，我是 AntD 的新手，我需要为输入字段设置一个规则，以便它可以获取电话号码或电子邮件。我正在尝试类似的方法，但它不能正常工作：

<Form.Item
                            name="contact-info"
                            rules={
                                [
                                    {required:true, message: 'Укажите контактные данные', type: "email"},
                                    {required:true, message: '', type: "number"}
                                ]
                            }
                        >
                            <Input placeholder='Телефон или e-mail' className="form-grid-input"/>
                        </Form.Item>

更新：发生的错误是当我输入电话号码时，它仍然没有通过验证器。但是，当我输入电子邮件时，一切正常 Trouble screenshot

【问题讨论】：

它的行为有什么错误？
@AqibJaved 在帖子中添加了有关错误的更新
您的电话号码验证没有启动的原因是您没有传递任何消息它的 message='' ，在规则中它的空使它像这样 {required:true, message: 'what你想显示的任何消息'，输入：“数字”}
@AhmedHosny 即使我传递了一条消息，它仍然不会通过验证器传递电话号码
@ИннокентийМихайлов 我已经发布了答案，请检查

标签： reactjs antd

【解决方案1】：

使用antd时请按照以下步骤操作，更多信息请查看antd official documentation

<Form
          name="basic"
          labelCol={{
            span: 8,
          }}
          wrapperCol={{
            span: 16,
          }}
          initialValues={{
            remember: true,
          }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            label="email"
            name="email"
            rules={[
              {
                required: true,
                message: 'email is required',
              },
            ]}
          >
            <Input />
          </Form.Item>
    
          <Form.Item
            label="phoneNumber"
            name="phoneNumber"
            rules={[
              {
                required: true,
                message: 'phone number is password!',
              },
            ]}
          >
            <Input />
          </Form.Item>
    
          <Form.Item
            wrapperCol={{
              offset: 8,
              span: 16,
            }}
          >
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </Form>

【讨论】：

我明白，简单验证的工作原理，但是，双重验证呢？（电话号码或电子邮件）
@ИннокентийМихайлов 在 antd 输入或字段中单独验证，所以如果你想验证电子邮件在电子邮件输入上验证它，如果电话号码则验证它电话号码输入
我已经根据您的需要更新了答案，请检查