Ant Design4.x rule验证规则的两种写法（函数与正则表达式）

啦啦啦啦

发布于 2023-02-27 14:06:46

4680

发布于 2023-02-27 14:06:46

文章被收录于专栏：啦啦啦啦前端

1 函数验证

 //函数
 const checkPrice = (rule, value) => {
    if (value.number > 0) {
      return Promise.resolve();
    }

    return Promise.reject('Price must be greater than zero!');
  };

//表单
 <Form.Item
        name="price"
        label="Price"
        rules={[
          {
            validator: checkPrice,
          },
        ]}
  >
      <PriceInput />
  </Form.Item>

2 正则表达式

rules={
    [
        {
            required: true,
            message: '请输入个数'
        },
        {
            pattern:/^(\d|[1-9]\d|100)$/,
            message:'请输入0~100之间的数字'
        }
    ]
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-05-07，如有侵权请联系 cloudcommunity@tencent.com 删除

正则表达式