开源Vue组件 FormCreate 使用组件内部方法校验

FormCreate 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的低代码表单生成组件。它支持 7 个 UI 框架，适配移动端，并且支持生成任何 Vue 组件。内置 20+ 种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定

文档 | GitHub | Gitee

通过自定义属性 componentValidate 可以实现在自定义组件内部进行表单验证。这个功能非常适合在自定义组件中实现特定的业务逻辑验证，确保用户输入的数据符合预期。

类型

ts 复制代码

// 可以自定义组件内方法的名称，默认为 `formCreateValidate`
type ComponentValidate = string | boolean;

注意

不同的 UI 框架对验证的实现方式可能有所不同，建议参考所使用 UI 框架的官方文档中的表单验证规则部分，了解 validator 的具体实现方式。

教程

1. 在自定义组件内部实现 formCreateValidate 方法

在自定义组件中定义一个名为 formCreateValidate 的方法，该方法将在表单验证时被调用。你可以根据业务逻辑在这个方法中编写验证规则。

js 复制代码

export default {
    methods: {
        formCreateValidate(rule, value, callback) {
            // 自定义验证逻辑
            if (value === 'form-create') {
                callback(); // 验证通过
            } else {
                callback('请输入`form-create`'); // 验证不通过，返回错误信息
            }
        }
    }
}

在 Setup 中使用

vue 复制代码

<script setup>
  defineExpose({
    formCreateValidate(rule, value, callback) {
      // 自定义验证逻辑
      if (value === 'form-create') {
        callback(); // 验证通过
      } else {
        callback('请输入`form-create`'); // 验证不通过，返回错误信息
      }
    }
  })
</script>

2. 设置componentValidate属性

在生成规则中，通过 componentValidate 属性启用组件内部验证。

js 复制代码

const rule = {
    type: 'custom-component',
    field: 'customField',
    title: '自定义组件',
    effect: {
        componentValidate: true
    }
}

如果你希望使用不同的方法名，而不是默认的 formCreateValidate，可以在 componentValidate 属性中指定自定义的方法名：

js 复制代码

const rule = {
  type: 'custom-component',
  field: 'customField',
  title: '自定义组件',
  effect: {
    componentValidate: 'myCustomValidateMethod'
  }
}

示例

以下是一个简单的示例，展示了如何在自定义组件中使用 componentValidate 进行表单验证：

复杂的输入验证

在一些业务场景中，你可能需要在自定义组件内进行更复杂的验证，例如检查输入是否符合特定的格式或规则。

js 复制代码

export default {
  methods: {
    formCreateValidate(rule, value, callback) {
      // 假设我们希望验证输入是否为有效的电子邮件地址
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (emailRegex.test(value)) {
        callback(); // 验证通过
      } else {
        callback('请输入有效的电子邮件地址');
      }
    }
  }
};

表单依赖项的验证

在一些复杂表单中，某些字段的验证逻辑可能依赖于其他字段的值。例如，如果一个选项被选中，另一个输入字段必须满足特定的条件。

js 复制代码

export default {
    props: {
        dependentValue: {
            type: String,
            required: true
        }
    },
    methods: {
        formCreateValidate(rule, value, callback) {
            if (this.dependentValue === 'special' && value !== 'expected') {
                callback('当 dependentValue 为 special 时，输入必须为 expected');
            } else {
                callback();
            }
        }
    }
};

异步验证

在某些情况下，验证可能需要与服务器交互，例如检查用户名是否已被占用。这时可以使用异步验证。

js 复制代码

export default {
  methods: {
    formCreateValidate(rule, value, callback) {
      if (!value) {
        return callback('用户名不能为空');
      }
      // 模拟异步请求
      setTimeout(() => {
        if (value === 'alreadyTaken') {
          callback('用户名已被占用');
        } else {
          callback(); // 验证通过
        }
      }, 1000);
    }
  }
};

多字段关联验证

当多个字段的值需要进行关联验证时，可以在一个字段中触发对其他字段的验证。

js 复制代码

export default {
    methods: {
        formCreateValidate(rule, value, callback, {api}) {
            const fieldValue = api.getValue('relatedField');
            if (value !== fieldValue) {
                callback('当前字段的值必须与相关字段的值匹配');
            } else {
                callback(); // 验证通过
            }
        }
    }
};

动态表单生成中的复杂验证

在动态生成的表单中，验证逻辑可能需要根据用户的选择或其他动态因素进行调整。

js 复制代码

export default {
    props: {
        dynamicRules: {
            type: Array,
            default: () => []
        }
    },
    methods: {
        formCreateValidate(rule, value, callback) {
            for (const rule of this.dynamicRules) {
                if (!rule.validate(value)) {
                    return callback(rule.message);
                }
            }
            callback(); // 所有规则验证通过
        }
    }
};

使用方式

js 复制代码

const rule = {
  type: 'custom-component',
  field: 'dynamicField',
  title: '动态字段',
  value: '',
  effect: {
    componentValidate: true
  },
  props: {
    dynamicRules: [
      { validate: (val) => val.length >= 5, message: '长度至少为5' },
      { validate: (val) => val.includes('@'), message: '必须包含@符号' }
    ]
  }
}

通过使用 componentValidate 属性和自定义验证方法，你可以轻松地将复杂的验证逻辑封装在自定义组件内，确保表单验证的灵活性和可维护性。这种方式非常适合在需要动态验证或业务逻辑复杂的场景下使用。