javascript - antd3表单如何实现字段的多个规则具有不同的校验触发时机？

Question

请问一下在antd3的form表单中怎么实现一个字段的多个规则运用不同的触发时机进行校验

比如说我这里这个表单项有3个规则，我想在1，2个规则在onChange的时候校验（也就是默认情况），
但是第三个规定在onBlur的时候校验，看了文档发现antd3中好像没找到什么解决办法

（这边想的是封装一个自定义组件，监听组件的onBlur事件，然后通过样式来模拟错误，但是这样只能在表面上看到错误，实际不能影响表单的校验，不知道有什么办法可以手动把这种错误添加到表单，然后校验）

下面是自定义组件的结构：

感觉上面的想法不是很好，有大佬有思路或者有其他什么好的办法，有经验的朋友可以分享一下吗

Answer 1

可以使用 Form.create 和 getFieldDecorator，自己定义校验的时机和内容。

Answer 2

封装的组件调用 validateFields

Answer 3

antd 设置表单校验触发时机

Answer 4

在 Ant Design 3 (antd3) 中，要实现字段的多个规则具有不同的校验触发时机，通常需要通过自定义校验逻辑来实现。Ant Design 3 的表单组件本身可能不支持直接为每个规则指定不同的触发时机，但你可以通过结合 rules 属性、getFieldDecorator 方法以及自定义事件处理函数来达到你的目的。

以下是一个基本的实现思路：

1. 定义规则：在 rules 中定义你的所有校验规则。
2. 自定义事件处理：通过 onChange 和 onBlur 事件处理函数来控制校验的触发。
3. 手动触发校验：使用表单实例的 validateFields 方法在特定时机手动触发校验。

示例代码可能如下：

import React from 'react';import { Form, Input, Button } from 'antd';class MyForm extends React.Component {  handleInputChange = (e) => {    const { value } = e.target;    // 这里可以执行 onChange 时的校验逻辑，比如规则 1 和规则 2    // ...你的校验逻辑        // 更新表单字段的值    this.props.form.setFieldsValue({ myField: value });  };  handleInputBlur = () => {    // 在 onBlur 时执行规则 3 的校验逻辑    const { form } = this.props;    form.validateFields(['myField'], { force: true }, (err, values) => {      if (!err) {        // 校验通过的处理逻辑      } else {        // 校验失败的处理逻辑，可以通过 err 对象获取错误信息      }    });  };  render() {    const { getFieldDecorator } = this.props.form;    return (      <Form>        <Form.Item>          {getFieldDecorator('myField', {            rules: [              // 这里定义你的所有规则，但注意这里不会直接区分触发时机              // { ...规则1 },              // { ...规则2 },              // { ...规则3，但不会在这里直接触发 }            ],          })(            <Input              onChange={this.handleInputChange}              onBlur={this.handleInputBlur}            />          )}        </Form.Item>        <Form.Item>          <Button type="primary" htmlType="submit">            提交          </Button>        </Form.Item>      </Form>    );  }}export default Form.create()(MyForm);

在这个示例中，handleInputChange 函数会在输入框内容变化时被调用，你可以在这里执行 onChange 时的校验逻辑（例如规则 1 和规则 2）。handleInputBlur 函数则会在输入框失去焦点时被调用，你可以在这里执行规则 3 的校验逻辑。通过 form.validateFields 方法，你可以手动触发特定字段的校验，并通过回调函数处理校验结果。

请注意，这只是一个基本的实现思路，具体的实现细节可能需要根据你的具体需求和项目结构进行调整。此外，由于 Ant Design 3 已经相对老旧，如果你正在开始一个新的项目，考虑使用更新版本的 Ant Design 或其他现代的 React 表单库可能是一个更好的选择。