Using Component Internal Method Validation

Form validation can be performed within custom components through the custom property componentValidate. This feature is suitable for implementing specific business logic validation in custom components, ensuring user input data meets expectations.

This feature is internally implemented through custom property methods.

Type

// Customize the method name within the component, default is `formCreateValidate`
type ComponentValidate = string | boolean;

Note

Different UI frameworks may have different implementations of validation. Refer to the form validation rules section in the official documentation of the UI framework you're using to understand the specific implementation of validator.

Tutorial

1. Implement formCreateValidate method inside custom component

Define a method named formCreateValidate in the custom component. This method is called during form validation. Write validation rules in this method according to business logic.

export default {
    methods: {
        formCreateValidate(rule, value, callback) {
            // Custom validation logic
            if (value === 'form-create') {
                callback(); // Validation passed
            } else {
                callback('Enter `form-create`'); // Validation failed, return error message
            }
        }
    }
}

Using in Setup

<script setup>
  defineExpose({
    formCreateValidate(rule, value, callback) {
      // Custom validation logic
      if (value === 'form-create') {
        callback(); // Validation passed
      } else {
        callback('Enter `form-create`'); // Validation failed, return error message
      }
    }
  })
</script>

2. Set componentValidate property

Enable component internal validation through the componentValidate property in generation rules.

const rule = {
    type: 'custom-component',
    field: 'customField',
    title: 'Custom Component',
    effect: {
        componentValidate: true
    }
}

To use a different method name instead of the default formCreateValidate, specify a custom method name in the componentValidate property:

const rule = {
  type: 'custom-component',
  field: 'customField',
  title: 'Custom Component',
  effect: {
    componentValidate: 'myCustomValidateMethod'
  }
}

Examples

A simple example showing how to use componentValidate for form validation in custom components:

Complex Input Validation

In some business scenarios, perform more complex validation within custom components, such as checking whether input conforms to specific formats or rules.

export default {
  methods: {
    formCreateValidate(rule, value, callback) {
      // Suppose we want to validate whether input is a valid email address
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (emailRegex.test(value)) {
        callback(); // Validation passed
      } else {
        callback('Enter a valid email address');
      }
    }
  }
};

Form Dependency Validation

In some complex forms, the validation logic of certain fields may depend on the values of other fields. For example, if an option is selected, another input field must meet specific conditions.

export default {
    props: {
        dependentValue: {
            type: String,
            required: true
        }
    },
    methods: {
        formCreateValidate(rule, value, callback) {
            if (this.dependentValue === 'special' && value !== 'expected') {
                callback('When dependentValue is special, input must be expected');
            } else {
                callback();
            }
        }
    }
};

Asynchronous Validation

In some cases, validation may need to interact with the server, such as checking whether a username is already taken. Use asynchronous validation in this case.

export default {
  methods: {
    formCreateValidate(rule, value, callback) {
      if (!value) {
        return callback('Username cannot be empty');
      }
      // Simulate asynchronous request
      setTimeout(() => {
        if (value === 'alreadyTaken') {
          callback('Username is already taken');
        } else {
          callback(); // Validation passed
        }
      }, 1000);
    }
  }
};

Multi-field Association Validation

When values of multiple fields need to be validated in association, trigger validation of other fields from one field.

export default {
    methods: {
        formCreateValidate(rule, value, callback, {api}) {
            const fieldValue = api.getValue('relatedField');
            if (value !== fieldValue) {
                callback('Current field value must match related field value');
            } else {
                callback(); // Validation passed
            }
        }
    }
};

Complex Validation in Dynamic Form Generation

In dynamically generated forms, validation logic may need to be adjusted based on user selections or other dynamic factors.

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(); // All rules validated
        }
    }
};

Usage

const rule = {
  type: 'custom-component',
  field: 'dynamicField',
  title: 'Dynamic Field',
  value: '',
  effect: {
    componentValidate: true
  },
  props: {
    dynamicRules: [
      { validate: (val) => val.length >= 5, message: 'Length must be at least 5' },
      { validate: (val) => val.includes('@'), message: 'Must include @ symbol' }
    ]
  }
}

By using the componentValidate property and custom validation methods, easily encapsulate complex validation logic within custom components, ensuring flexibility and maintainability of form validation. This approach is suitable for scenarios requiring dynamic validation or complex business logic.