表单的正则表达式模式匹配验证在 ant.design 中不起作用

Question

我有以下输入要验证以匹配这种形式的 uuid:

51de1069-c0fd-4418-8378-5871c597023b

这是似乎不会触发验证的表单:

<Form
    name="id"
    onFinish={this.handleJoin}
    size="large"
>
    <Form.Item
        name="channelId"
        rules={[
            {
                required: true,
                type: "regexp",
                pattern: new RegExp("[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}"),
                message: 'Please enter a valid existing channel ID',
            },
        ]}
    >
        <Input min={30} max={40} placeholder="Enter channel ID" autoFocus={true} ref={this.input}/>
    </Form.Item>
    <Form.Item>
        <Button type="primary" htmlType="submit" block size="large" icon={<LoginOutlined />}>
            Join
        </Button>
    </Form.Item>
</Form>

当我单击加入按钮时，验证似乎没有运行。有任何想法吗？

当我进行如下验证时，它有效，我在输入下方收到一条红色错误消息:

{
    required: true,
    message: 'Please enter a valid existing channel ID',
}

Answer 1

您只需要更改您的模式声明，而且我认为您应该拆分规则。更改如下:

   rules={[
            {
                required: true,
                message: 'Channel ID is required',
            },{
                pattern: /[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}/,
                message: 'Please enter a valid channel ID',
            }
        ]}