formCreate自定义组件的自定义规则校验/必填校验的实现方法

仅简要记录

以OneFlow的产品中心项目为例

在src/App.vue全局注册了一个“自定义事件”

formCreate.register({
  name: 'componentValidate',
  loaded(_, rule, fApi) {
    rule.validate = [
      {
        validator: (rule, value, callback) => {
          fApi.el(rule.field).formCreateValidate(rule, value, callback);
        },
        required: rule.isRequired !== '0',
      },
    ];
  },
});

然后在具体表单页面的getRules方法中对不同定制组件配置了componentValidate值

if (ruleItem.type == 'DisposeTable') {
  // 定制组件
  if (ruleItem.isRequired == '1') {
    ruleItem.effect.componentValidate = true;
  }
  ruleItem.col.span = 24;
}

只要配了为true，那么在生命周期中的“loaded”这个时刻就会执行上面全局注册的回调函数。
根据回调函数中的逻辑，相当于只要在自定义组件的defineExpose中传一个名为formCreateValidate的自定义校验规则函数，即可实现给自定义组件加上自定义规则校验的效果。