React ant 设计表单中的电子邮件验证

Question

我正在 React.js 中使用蚂蚁设计。我正在尝试使用 ant 设计规则验证电子邮件。我的正则表达式不起作用。

<Form.Item>
    {getFieldDecorator('email', {
        initialValue:null,
        rules: [
            {
                required: false,
                pattern: new RegExp("/\S+@\S+\.\S+/"),
                message:
                    'Enter a valid email address!',
            },
        ],
    })(
        <Input
            className="form-control"
            type="text"
            placeholder="Email"
        />,
    )}
</Form.Item>

Answer 1

在规则中，您可以直接使用带有值电子邮件的类型键而不是正则表达式模式。

代码示例https://codesandbox.io/s/stackoverflowantdemail-9jckh?file=/index.js:916-1352

<Form.Item>
          {getFieldDecorator("email", {
            rules: [
              {
                required: true,
                type: "email",
                message: "The input is not valid E-mail!"
              }
            ]
          })(
            <Input
             
              placeholder="Email"
            />
          )}
        </Form.Item>

Answer 2

<Form.Item
    name="email"
    label="E-mail"
    rules={[
      {
        type: 'email',
        message: 'The input is not valid E-mail!',
      },
      {
        required: true,
        message: 'Please input your E-mail!',
      },
    ]}
  >
    <Input />
  </Form.Item>