antd form 表单数据校验·记_antd form校验

目录

一、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 表单校验规则

三、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>