多姿多彩的联合校验，驰骋表单新世界

2023-07-10 08:57:45

自定义 Ant Design 表单校验规则和联合校验

在前端开发中，表单校验是确保用户输入数据的完整性和有效性的关键。Ant Design 提供了丰富的内置校验规则，但有时候我们需要定义自己的校验规则来满足特殊需求。此外，联合校验允许我们根据其他表单项的值对特定表单项进行条件校验。

自定义校验规则

自定义校验规则遵循以下语法：

validator(rule, value, callback) {
  // 校验逻辑
  if (条件满足) {
    callback(); // 通过校验
  } else {
    callback(错误信息); // 校验失败
  }
}

其中，rule 是校验规则配置对象，value 是待校验的值，callback 是校验结果的回调函数。

联合校验

联合校验允许我们基于其他表单项的值对特定表单项进行条件校验。通过 dependencies 属性，我们可以指定需要联合校验的表单项名称。当这些表单项的值发生变化时，Ant Design 会自动触发联合校验。

实际案例

以下是一个使用自定义校验规则和联合校验的实际案例：

需求：

用户可以选择 "是" 或 "否" 回答 "是否同意" 问题。
如果用户选择 "是"，则需要填写 "详细说明" 字段。
如果用户选择 "否"，则不需要填写 "详细说明" 字段。

实现：

import { Form, Radio, Input } from 'antd';

const customRule = (rule, value, callback) => {
  if (value === '是') {
    callback();
  } else {
    callback('请填写详细说明');
  }
};

const Demo = () => {
  const [form] = Form.useForm();

  return (
    <Form form={form}>
      <Form.Item
        name="isAgree"
        label="是否同意"
        rules={[
          {
            required: true,
            message: '请选择是否同意',
          },
        ]}
      >
        <Radio.Group>
          <Radio value="是">是</Radio>
          <Radio value="否">否</Radio>
        </Radio.Group>
      </Form.Item>

      <Form.Item
        name="detail"
        label="详细说明"
        dependencies={['isAgree']}
        rules={[
          {
            required: true,
            message: '请填写详细说明',
          },
          {
            validator: customRule,
          },
        ]}
      >
        <Input />
      </Form.Item>

      <Button type="primary" htmlType="submit">
        提交
      </Button>
    </Form>
  );
};