antdpro的ProForm加了rules没有生效 antd form rules

目录

一、antd form 表单校验语法

二、antd form 表单校验规则

三、antd form 表单校验实例

1、一般的表单校验

2、连续的表单校验

3、连续的复杂表单校验

（1）、Form.list 下的 Form.Item 的校验

（2）、Form.Item 下的 Form.Item 的校验

---

一、antd form 表单校验语法

Rule 支持接收 object 进行配置，也支持 function 来动态获取 form 的数据：

type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);

二、antd form 表单校验规则

名称	说明	类型
defaultField	仅在 type 为 array 类型时有效，用于指定数组元素的校验规则	rule
enum	是否匹配枚举中的值（需要将 type 设置为 enum）	any[]
fields	仅在 type 为 array 或 object 类型时有效，用于指定子元素的校验规则	Record<string, rule>
len	string 类型时为字符串长度；number 类型时为确定数字； array 类型时为数组长度	number
max	必须设置 type：string 类型为字符串最大长度；number 类型时为最大值；array 类型时为数组最大长度	number
message	错误信息，不设置时会通过模板自动生成	string
min	必须设置 type：string 类型为字符串最小长度；number 类型时为最小值；array 类型时为数组最小长度	number
pattern	正则表达式匹配	RegExp
required	是否为必选字段	boolean
transform	将字段值转换成目标值后进行校验	(value) => any
type	类型，常见有 string |number |boolean |url | email。更多请参考此处	string
validateTrigger	设置触发验证时机，必须是 Form.Item 的 validateTrigger 的子集	string | string[]
validator	自定义校验，接收 Promise 作为返回值。示例参考	(rule, value) => Promise
whitespace	如果字段仅包含空格则校验不通过	boolean

三、antd form 表单校验实例

1、一般的表单校验

通过实现 Form.Item 的 rules 属性，来定制规则。

例如：

<Form
  form={myForm}
  name="my_form"
  onFinish={onFinish}
  autoComplete="off"
>
  <Form.Item
    name="username"
    label="姓名"
    rules={[
      {
        required: true,
        message: '请输入你的名字',
      },
    ]}
  >
    <Input />
  </Form.Item>
</Form>

2、连续的表单校验

如果一个字段设置了 dependencies 属性。那么它所依赖的字段更新时，该字段将自动触发更新与校验。

通过  dependencies 属性，指定与当前字段（A）关联的字段（例如：B），当 B 发生变化时，A 将自动触发更新与校验。

rules 里为额外的校验新增一个函数。例如：

<Form
  form={myForm}
  name="my_form"
  onFinish={onFinish}
  autoComplete="off"
>
  <Form.Item
    name="password"
    label="密码"
    rules={[
      {
        required: true,
        message: '请输入密码',
      },
    ]}
    hasFeedback
  >
    <Input.Password />
  </Form.Item>

  <Form.Item
    name="confirm"
    label="确认密码"
    dependencies={['password']}
    hasFeedback
    rules={[
      {
        required: true,
        message: '请确认密码',
      },
      ({ getFieldValue }) => ({
        validator(_, value) {
          if (!value || getFieldValue('password') === value) {
            return Promise.resolve();
          }
          return Promise.reject(new Error('两次密码不一致!'));
        },
      }),
    ]}
  >
    <Input.Password />
  </Form.Item>
</Form>

3、连续的复杂表单校验

（1）、Form.list 下的 Form.Item 的校验

rules 里为额外的校验新增一个函数。例如：

（2）、Form.Item 下的 Form.Item 的校验

rules 里为额外的校验新增一个对象。例如：

<Form
  form={myForm}
  name="my_form"
  onFinish={onFinish}
  autoComplete="off"
>
  <Form.Item name="test">
    <Input.Group compact>
      <Form.Item
        name="method"
        noStyle
        rules={[{ required: true }]}
      >
        <Select>
          <Option value="GET">GET</Option>
          <Option value="POST">POST</Option>
        </Select>
      </Form.Item>
      <Form.Item
        name={['test', 'url']}
        noStyle
        rules={[{
          required: true,
          message: 'url不能为空'
        },
        {
          type: 'url',
          message: '请输入完整的url',
        }
        ]}
      >
        <Input placeholder="填写接口url地址"/>
      </Form.Item>
      <Form.Item>
        <Button type='primary' onClick={getTestResult}>
          test
        </Button>
      </Form.Item>
    </Input.Group>
  </Form.Item>
</Form>