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

最新推荐文章于 2024-05-17 15:07:57 发布

原创最新推荐文章于 2024-05-17 15:07:57 发布 · 778 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #react.js #javascript

React&Ant Design 专栏收录该内容

9 篇文章

订阅专栏

本文探讨了如何使用JavaScript的Promise进行价格验证，确保价格大于零，并通过表单实现，同时介绍了正则表达式的应用，确保输入为0-100之间的数字。

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之间的数字'
        }
    ]
}